通过点击一个按钮和一个带有jQuery的独立JS文件，触发Google Map Marker上的点击事件 [英] Trigger a click event on a Google Map Marker by clicking on a button and a seperate JS file with jQuery
问题描述
我使用的是Google Map API v3以及jQuery 1.11.0。
我在以下div中使用Google Map -
< div id =googleMapclass =map_div>< / div>
地图有4个标记，它的单击事件是通过这种方式在JS中添加的 -
google.maps.event.addListener（marker，'click'，
（function（marker，i）//添加点击函数
{
return function（）
{
//在这里添加您的自定义点击代码
alert（locations [i] [3]）;
/ / End在这里添加您的定制点击代码
}
}）（marker，i））;
现在我在html的另一部分有一个按钮（外部地图 ）像这样 -
< button id =3>点击我< /按钮>
现在我想添加一个点击事件，它会触发一个索引为3，
所以，我在JavaScript中使用HTML这样的 -
<脚本>
$（document）.ready（function（）
{
$（＃3）。click（function（）{
google.maps.event.trigger（markers [3]，'点击'）;
}）;
}）;
< / script>
但它不起作用。我认为它不能用jQuery选择标记。
因为我以前用jQuery选择过地图 -
google.maps.event.trigger（$（ #googleMap）[0]，'resize'）;
重新设定地图大小。
所以，任何人都可以帮助我在jQuery中使用 Google Map标记的选择器脚本。
感谢您提供帮助。
这就是你的意思？
流动我的例子：
我已经使用 google.maps.event.trigger（markers [2]，'click'）;
，它工作。我从你的事件点击标记错误。
我的例子
Javascript p>
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 ]，
[16107， https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q]，
[23,105，https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q]];
var markers = [];
函数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 =沙滩[2];
var image = new google.maps.MarkerImage（
urlimg，
null，
null，
null，
google.maps.Size（15 ，15））;
var myLatLng = new google.maps.LatLng（beach [0]，beach [1]）;
markers [i] = new google.maps.Marker（{
位置：myLatLng，
map：地图，
图标：图片，
可拖动：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（地图，沙滩）;
}
window.onload = initialize;
// Html
< body>
< input type =buttonid =btn-clickvalue =Click/>
< div id =map_canvasstyle =width：100％; height：100％>< / div>
< / body>
< script>
$（document）.ready（function（）{
$（＃btn-click）。click（function（）{
google.maps.event.trigger（markers [2 ]，'点击'）;
}）;
}）;
< / script>
I am using Google Map API v3 anf jQuery 1.11.0.
I have a Google Map in the following div-
<div id="googleMap" class="map_div"></div>
The map has 4 markers and it's click event is added by this way in 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-
<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.
So, I have JavaScript in HTML like this-
<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-
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.
Thanks in advance for helping.
It's what you mean??
flow my examples:
I have use google.maps.event.trigger(markers[2], 'click');
and it worked. I thing wrong from your event click of marker. My examples
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
<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>
这篇关于通过点击一个按钮和一个带有jQuery的独立JS文件，触发Google Map Marker上的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
