Question

我似乎无法在地图中显示折线。我使用setPath并提取变量中的位置点：points。我想在地图上显示各种折线。任何建议将不胜感激:)谢谢！

var markers = [];
var iterator = 0;
var map;
var mapCenter=new google.maps.LatLng(24.804188,54.862747);

var points = [
['Airport', 24.433241, 54.651096, 12, '#airport'],
['Marine Mall', 24.475968, 54.320953, 11, '#marinemall'],
['Farrari World', 24.481739, 54.606426, 10, '#'],
['Atlantis', 25.1299, 55.117924, 10, '#'],
['Dubai Mall', 25.197126, 55.279092, 10, '#'],
['Burj Khalifa', 25.197097, 55.274144, 10, '#'],
['Burj Al Arab', 25.141167, 55.185472, 10, '#'],
['Water Park', 25.134358, 55.120317, 10, '#']
];

function initialize() {

var styles = [  
    {  
    featureType: 'all',  
    elementType: 'label',  
    stylers: [  
        { visibility:"off" }  
    ]  
}
];

var mapOptions = {
    center: mapCenter,
    zoom:10,
    mapTypeId:google.maps.MapTypeId.HYBRID
};

map=new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.setOptions({styles:styles});

setPath(map, points);
}

function setPath(map, locations){
for (var i = 0; i < locations.length; i++) {
    var place = locations[i];
    var myLatLng = new google.maps.LatLng(place[1], place[2]);
    var line = new google.maps.Polyline({
        map: map,
        geodesic: true,
        path:myLatLng,
        strokeColor:"#ED5552",
        strokeOpacity:1,
        strokeWeight:2
    });
}
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

在您的以下代码部分

function setPath(map, locations)
{
    for (var i = 0; i < locations.length; i++)
    {
        var place = locations[i];
        var myLatLng = new google.maps.LatLng(place[1], place[2]);
        var line = new google.maps.Polyline({
            map: map,
            geodesic: true,
            path:myLatLng,
            strokeColor:"#ED5552",
            strokeOpacity:1,
            strokeWeight:2
        });
    }
}

您在每个循环中创建myLatLng变量，使其数组在循环外定义，并从latlng推送每个point/Location array并创建var line = new google.maps.Polyline({....此外循环

以下是您的代码 Demo 的更改

谷歌地图api显示折线

1 个答案: