使用api v3绘制多条编码的折线 [英] draw multiple encoded polylines using api v3

问题描述

我有一组从方向服务的结果中检索到的编码折线，并且已经将它们存储在php数组中.

I have a set of encoded polylines, retrieved from the result of direction service, and I have stored them in a php array.

使用下面的代码，我可以添加一条折线.如何修改它以同时添加多条折线?

With the code below, I can add a single polyline. How do I modify it to add multiple polylines at the same time?

var code = '_mjsB{qp{LvAe@xImCjGgBf@St@Qf@Un@e@Hm@Pc@VW^MhAc@`B{@lAw@zCyA`@KvEyB`Ao@PQNK';

var paths = google.maps.geometry.encoding.decodePath(code);

var flightPath = new google.maps.Polyline({
  path:pathss,
  strokeColor: "#0000FF",
  strokeOpacity: 1.0,
  strokeWeight: 2
}); flightPath.setMap(map);

推荐答案

您是否希望所有折线具有相同的样式，或者它们需要不同的样式以用于不同的折线?现在假设它们是相同的.让我知道他们是否需要与众不同，我们可以调整代码.

Do you want all of your polylines to have the same styling, or do they need different styles for the different polylines? Let's assume they are the same for now; let me know if they need to be different and we can adjust the code.

因此，首先，编写PHP代码以生成编码路径的JavaScript数组.我让您整理一下这部分.

So first, write the PHP code to generate a JavaScript array of your encoded paths. I'll let you sort out this part.

然后，使用JavaScript编写一个简单的循环以解码每个路径并将其添加到地图中:

Then, write a simple loop in JavaScript to decode each path and add it to the map:

// These are the encoded paths generated from PHP
var encodedFlightPaths = [
    '...first-path...',
    '...second-path...',
    '...third-path...'
];

addEncodedPaths( encodedFlightPaths );

function addEncodedPaths( encodedPaths ) {
    for( var i = 0, n = encodedPaths.length;  i < n;  i++ ) {
        addEncodedPath( encodedPaths[i] );
    }
}

function addEncodedPath( encodedPath ) {
    var path = google.maps.geometry.encoding.decodePath( encodedPath );

    var polyline = new google.maps.Polyline({
        path: path,
        strokeColor: "#0000FF",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    polyline.setMap( map );
}

这篇关于使用api v3绘制多条编码的折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！