Question

我正在制作一个个人网页，用于在明年旅行时为家人和朋友上传gps coord的旅行记录。我发现这个网站真的很有帮助我这么远，但我有点卡住，并会欣赏正确方向的一点。

我已经完成了一些显示一个poly的代码，但是我希望能够添加不同颜色的多个多边形，但是我想保持它尽可能简单，因为我会这样做大部分时间都来自我的手机。

route1和route2是lat lng coords，存储在外部.js文件中。我可以得到route1.Poly来显示但是route2.Poly不会。通过查看其他示例，我认为应该有一个for循环，因为我已经完成了Markers并且setMap函数应该只被调用一次？

任何帮助都会很棒

<script type="text/javascript"> <!--

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 53.77378, lng: -1.535946},
mapTypeId: google.maps.MapTypeId.TERRAIN
  });
/*__________Polylines__________*/
//Polyline routes in three sections
// [1] - the latitude and longitude coords. NO COMMA ON LAST VALUE!!! - Now in external .js file declared above

// [2] - route polyline parameters
var route1Poly = new google.maps.Polyline({
path: route1,           //route name
geodesic: true,         //follows curvature of earth if true
strokeColor: '#FF0000', //line colour (red)
strokeOpacity: 1.0,     //line opacity
strokeWeight: 2         //line thickness});

var route2Poly = new google.maps.Polyline({
path: route1,           //route name
geodesic: true,         //follows curvature of earth if true
strokeColor: '#FF0000', //line colour (red)
strokeOpacity: 1.0,     //line opacity
strokeWeight: 2         //line thickness
});

// [3] - call polyline function
route1Poly.setMap(map); 
route2Poly.setMap(map);

setMarkers(map); // Calls markers/waypoint function
}//routes must be declared in initMapfunction

/*__________Waypoints__________*/
//icon image reference in ext file
//waypoint parameters in ext file

function setMarkers(map) {
/* Adds markers to the map.*/

var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
//for loop loads waypoints array into parameter variables and draws
for (var i = 0; i < waypoints.length; i++) {
var wpoint = waypoints[i];    
var image = {
url: wpoint[4],//IC_test,//'icon.png',//[kmlIconURL + wpoint[4]],
// This marker is 64 pixels wide by 64 pixels high.
size: new google.maps.Size(64, 64),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(32, 64)
};

var marker = new google.maps.Marker({
  position: {lat: wpoint[1], lng: wpoint[2]}, //coord of waypoint
  map: map,         //which map to be drawn in
  icon: image,      //loads image URL
  shape: shape,     //defines clickable region
  title: wpoint[0], //label
  zIndex: wpoint[3] //index for draw order
});
}
}
-->
</script>

我现在已经添加了，

function setPolys(map) {

var pathsRef = [
['route1', 'true', '#FF0000', 1.0, 2],
['route2', 'true', '#FF0000', '1.0', 2]
];

for (var ii = 0; ii < pathsRef.length; ii++) {
var pathPar = pathsRef[ii];

var routePoly = new google.maps.Polyline({
    path: pathPar[0],               //route name
    geodesic: pathPar[1],           //follows curvature of earth if true
    strokeColor: pathPar[2],        //line colour (red)
    strokeOpacity: pathPar[3],      //line opacity
    strokeWeight: pathPar[4]        //line thickness
});
};
}

并使用initMap函数调用它，

setPolys(map);

但现在两条路径都没有显示，但是路点是，

编辑2：尝试将setMap()带入for循环，仍然没有路径，

for (var ii = 0; ii < pathsRef.length; ii++) {
    var pathPar = pathsRef[ii];

    var routePoly = new google.maps.Polyline({
        path: pathPar[0],               //route name
        geodesic: true, //pathPar[1],//         //follows curvature of earth if true
        strokeColor: '#FF0000', //pathPar[2],//     //line colour (red)
        strokeOpacity: 1.0, //pathPar[3],//     //line opacity
        strokeWeight: 2 //pathPar[4] //     //line thickness
    });
routePoly.setMap(map);
};

JavaScript Maps API多条折线路径

0 个答案: