Javascript 通过单击按钮和使用 jQuery 的单独 JS 文件在 Google 地图标记上触发单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28497023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger a click event on a Google Map Marker by clicking on a button and a seperate JS file with jQuery
提问by Abrar Jahin
I am using Google Map API v3 anf jQuery 1.11.0.
我正在使用 Google Map API v3 anf jQuery 1.11.0。
I have a Google Map in the following div-
我在以下 div 中有一个 Google 地图-
<div id="googleMap" class="map_div"></div>
The map has 4 markers and it's click event is added by this way in JS-
地图有 4 个标记，它的点击事件是通过这种方式在 JS 中添加的-
google.maps.event.addListener(marker, 'click',
(function(marker, i) //Adding Click Function
{
return function()
{
//Add Your Customized Click Code Here
alert(locations[i][3]);
//End Add Your Customized Click Code Here
}
})(marker, i));
Now I have a button in another part of the html (outside map) like this-
现在我在 html 的另一部分（地图外）有一个按钮，如下所示-
<button id="3">Click Me</button>
Now I want to add a on click event which will trigger click event of a map marker with index of 3.
现在我想添加一个点击事件，它将触发索引为 3 的地图标记的点击事件。
So, I have JavaScript in HTML like this-
所以，我在 HTML 中有这样的 JavaScript-
<script>
$(document).ready(function()
{
$("#3").click(function(){
google.maps.event.trigger(markers[3], 'click');
});
});
</script>
But it is not working. I think it can't select the marker with jQuery. Because I have previously selected the map with jQuery like this-
但它不起作用。我认为它不能用 jQuery 选择标记。因为我之前是这样用jQuery选择地图的——
google.maps.event.trigger($("#googleMap")[0], 'resize');
To re-size the map.
重新调整地图大小。
So, can anyone help me to have the Selector script of a Google Map Marker in jQuery.
那么，任何人都可以帮助我在 jQuery 中使用 Google Map Marker的Selector 脚本。
Thanks in advance for helping.
提前感谢您的帮助。
回答by HoangHieu
It's what you mean??
flow my examples:
I have use google.maps.event.trigger(markers[2], 'click');
你是这个意思？？流我的例子：我用过google.maps.event.trigger(markers[2], 'click');
and it worked. I thing wrong from your event click of marker. My examples
它奏效了。我从你的事件点击标记中出错了。 我的例子
Javascript
Javascript
var tam = [16.3,108];
var toado = [[16.5,108.5,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"],
[16.3,108,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"],
[16,107,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"],
[23,105,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"]];
var markers = [];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(tam[0], tam[1]),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0; i < toado.length; i++) {
var beach = toado[i];
urlimg = beach[2];
var image = new google.maps.MarkerImage(
urlimg,
null,
null,
null,
new google.maps.Size(15, 15));
var myLatLng = new google.maps.LatLng(beach[0], beach[1]);
markers[i] = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
draggable : true,
animation : google.maps.Animation.DROP
});
var ismove = true;
(function(marker,i){
google.maps.event.addListener(marker, 'click', function(){
alert(toado[i][2]);
//infowindow.open(map,this);
});
}(markers[i],i));
}
//setMarkers(map, beaches);
}
window.onload = initialize;
//Html
//HTML
<body>
<input type="button" id="btn-click" value="Click"/>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
<script>
$(document).ready(function(){
$("#btn-click").click(function(){
google.maps.event.trigger(markers[2], 'click');
});
});
</script>
