使用api v3绘制多个编码折线

时间:2013-03-24 17:16:46

标签: javascript google-maps-api-3

我有一组编码折线,从方向服务的结果中检索出来,我将它们存储在php数组中。

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

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);

1 个答案:

答案 0 :(得分:1)

您是否希望所有折线具有相同的样式,或者它们是否需要针对不同折线的不同样式?我们假设它们现在是一样的;让我知道他们是否需要不同,我们可以调整代码。

首先,编写PHP代码以生成编码路径的JavaScript数组。我会让你理清这一部分。

然后,在JavaScript中编写一个简单的循环来解码每个路径并将其添加到地图中:

// 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 );
}