[英]Google maps overlay clickable
Im new to javascript. 我是javascript新手。 In a map, when an overlay is clicked, I am trying to make it so that a function is called that has access to the clicked overlay.
在地图中,当单击叠加层时,我正在尝试制作它,以便调用可以访问单击的叠加层的函数。
Here is my code, not getting any errors in the console. 这是我的代码,在控制台中没有出现任何错误。
<div style='width: 800px;'>
<div id="multi_overlays" style='width: 1000px; height: 600px;'></div>
</div>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'multi_overlays'}}, function(){
var circles = handler.addCircles(
[{ lat: 41.991873, lng: -70.652213, radius: 2000 }],
{ strokeColor: '#FF0001'}
);
var polylines = handler.addPolylines(
[
[
]
],
{ strokeColor: '#FF0000'}
);
var polygons = handler.addPolygons(
[
//ccb_nw
[{lat:41.83,lng:-70.44},{lat:41.87,lng:-70.28},{lat:41.77,lng:-70.49},{lat:41.75,lng:-70.19}],
//ccb_se
[{lat: 41.984198, lng: -70.319776}, {lat: 41.970926, lng: -70.110349},{lat: 41.825776, lng: -70.164594},{lat: 41.803259, lng: -70.222959}],
//ccb_sw
[{lat: 41.887260, lng: -72.529131}, {lat: 41.920867, lng: -70.335363},{lat: 41.794781, lng: -70.283835},{lat: 41.783006, lng: -70.498755}],
],
{ strokeColor: '#FF0000'}
);
handler.bounds.extendWith(polylines);
handler.bounds.extendWith(polygons);
handler.bounds.extendWith(circles);
handler.fitMapToBounds();
markers = handler.addMarkers([{"lat":42.30010009999999,"lng":-70.2994764,"infowindow":"Bass bite is picking up"},{"lat":41.6820897,"lng":-69.95976639999999,"infowindow":"Tuna non existent"},{"lat":42.0417525,"lng":-70.6722767,"infowindow":"good trip"},{"lat":42.072454,"lng":-70.206835,"infowindow":"On fire"}]);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
I tried using Google Maps addListener event to listen for clicks: 我尝试使用Google Maps addListener事件来监听点击:
handler.addListener('click', function(event){
alert('the map was clicked');
});
The above code does not work. 上面的代码不起作用。 The overlays appear but nothing happens when they are clicked.
出现叠加层,但是单击它们时没有任何反应。 I think it might have something to do with panes:
我认为这可能与窗格有关:
https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes
But every time I try to add a overlayMouseTarget it tells me the object doesn't exist. 但是每次我尝试添加overlayMouseTarget时,它都会告诉我该对象不存在。 I am very lost.
我很失落。 How do I make an overlay clickable?
如何使叠加层可点击?
You will need to make a listener using the variable you set for the marker/circle you are using. 您将需要使用为所使用的标记/圆圈设置的变量创建一个侦听器。 This should help you:
这应该可以帮助您:
google.maps.event.addListener(<variable>, 'click', function (event) {
handleClick(event); // Your function here
});
I have a bigger example here: https://snippetbox.xyz/9eb54a2a1f52dc1f5d41/ 我在这里有一个更大的例子: https : //snippetbox.xyz/9eb54a2a1f52dc1f5d41/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.