我尝试在谷歌地图中绘制一条线,我尝试这个代码,没有任何事情只发生标记没有线,我已经读过像https://developers.google.com/maps/documentation/javascript/v2/overlays#Icons_overview这样的引用 并尝试代码,但线仍然没有出来,任何人都可以帮助我? 下面是我的代码,假设地址是数组
for (var i = 0; i < address.length; i++) {
geocoder.geocode({ 'address': address[i] }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (i == 2) {
var pos1 = results[0].geometry.location;
alert(pos1);
}
else if (i == 2) {
var pos2 = results[0].geometry.location;
alert(pos2);
}
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker
(
{
position: results[0].geometry.location,
map: map,
title: 'click me'
}
);
var infowindow = new google.maps.InfoWindow
(
{
content: '<img src="http://wallpaperscraft.com/image/child_girl_emotion_sweet_face_25641_100x100.jpg"> Welcome to origineit'
}
);
var flightPlanCoordinates = [
new google.maps.LatLng(pos1),
new google.maps.LatLng(pos2)
];
if (i == 2) {
var polyline = new google.maps.Polyline
({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3
});
polyline.setMap(map);
}
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
答案 0 :(得分:4)
这里的问题是你使用谷歌地图V3(你应该)除了来自V2的折线以外的所有东西。您应该阅读API documentation for Google Maps V3而不是。
对于Google Maps V3,它应该如下所示:
修改强>
在测试你的代码时(而不仅仅是从头脑中写出答案)我还注意到你有一些范围问题(你在更新的代码中检查if(i == 2)
时未能解决这个问题,我建议this article让你更多地了解这个问题)所以我也改变了。下面的代码经过测试可以工作(http://jsfiddle.net/YMyc9/),但实际上应该重构一下,以便更容易理解。
var pos1 = null; // These need to be declared outside of the geocode-callback
var pos2 = null; // so we also remove 'var' from the assignment inside of that function
for (var i = 0; i < address.length; i++) {
geocoder.geocode({'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// We can't use 'i' here since this happens in a callback and the loop will already
// have progressed and 'i' is (with my two test addresses) always 2 here.
if (pos1 == null) {
pos1 = results[0].geometry.location;
}
else if (pos2 == null) {
pos2 = results[0].geometry.location;
}
else {
/* We already got two so maybe quit? */
return;
}
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: 'click me'
});
var infowindow = new google.maps.InfoWindow({
content: '<img src="http://wallpaperscraft.com/image/child_girl_emotion_sweet_face_25641_100x100.jpg"> Welcome to origineit'
});
/* NEW CODE HERE */
if (pos2 != null) {
var polyline = new google.maps.Polygon({
paths: [pos1, pos2],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polyline.setMap(map);
} /* BACK TO THE OLD CODE HERE */
google.maps.event.addListener(marker, 'click', function() {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}