[英]Multiple Google Maps polylines and infowindows
When trying to add multiple infowindows to polylines, the infowindow doesn't show. 当尝试将多个infowindows添加到折线时,infowindow不会显示。
Already tried this thread with the same question: Multiple polylines and infowindows with Google Maps V3 已经尝试使用相同的问题: 使用Google Maps V3的多个折线和信息窗口
As you can see I tried to use the suggested function in the given answer, but still it won't work. 正如您所看到的,我尝试在给定的答案中使用建议的功能,但它仍然无效。
Here is my code: 这是我的代码:
var center = new google.maps.LatLng(51.97559, 4.12565);
var map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412']
// end coordinates
var end = ['51.94784, 1.2539',
'51.94784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685']
function initialize() {
// Make clickable tooltip
/*
*/
for (var i=0; i < end.length; i++){
calcRoute(start[i], end [i]);
}
}
function calcRoute(source,destination){
var poly = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 5,
strokeOpacity: 0.5
});
var directionsService = new google.maps.DirectionsService();
var request = {
origin:source,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
path = result.routes[0].overview_path;
$(path).each(function(index, item) {
poly.getPath().push(item);
bounds.extend(item);
})
// Custom infoWindow
var toolTip = '<div id="map-box">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Route</h1>'+
'<div id="bodyContent">'+
'<p>Lorem ipsum dolor sit amet</p>'+
'</div>'+
'</div>';
poly.setMap(map);
createInfoWindow(poly,toolTip);
map.fitBounds(bounds);
}
});
}
function createInfoWindow(poly,content) {
google.maps.event.addListener(poly, 'click', function(event) {
infowindow.content = content;
//infowindow.position = event.latLng;
infowindow.setPosition(event.latLng);
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
here is the jsfiddle link: http://jsfiddle.net/cnwMG/7/ 这里是jsfiddle链接: http : //jsfiddle.net/cnwMG/7/
Any help to show the infowindow on a polyline would really be appreciated. 任何有助于在折线上显示信息窗口的帮助都会受到赞赏。
You lacked the most basic : Instantiating the infowindow :) 你缺乏最基本的:实例化infowindow :)
Then, the right way to set infowindow properties is like this 然后,设置infowindow属性的正确方法是这样的
infowindow.setContent(toolTip);
infowindow.setPosition(event.latLng);
not 不
infowindow.content = toolTip;
You also had some problems with the logic of calling the infowindow. 调用infowindow的逻辑也存在一些问题。
Here is a cleaned up forked fiddle http://jsfiddle.net/b7FHV/ 这是一个清理分叉的小提琴http://jsfiddle.net/b7FHV/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.