用jQuery点击一个按钮和一个单独的JS文件，在谷歌地图标记上触发点击事件

Trigger a click event on a Google Map Marker by clicking on a button and a seperate JS file with jQuery

本文关键字：一个 图标 谷歌 地图 事件 按钮 jQuery 单独 文件 JS      更新时间：2023-10-10

我使用的是Google Map API v3 anf jQuery 1.11.0。

我在下面的div-中有一个谷歌地图

<div  id="googleMap" class="map_div"></div>

该地图有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));

现在我在html的另一部分有一个按钮（外部地图），如下所示-

<button id="3">Click Me</button>

现在我想添加一个点击事件，它将触发索引为3的地图标记的点击事件。

所以，我在HTML中有这样的JavaScript-

<script>
$(document).ready(function()
{
    $("#3").click(function(){
        google.maps.event.trigger(markers[3], 'click');
    });
});
</script>

但它不起作用。我认为它无法用jQuery选择标记。因为我之前用jQuery选择了这样的地图-

google.maps.event.trigger($("#googleMap")[0], 'resize');

重新调整地图大小。

因此，有人能帮助我在jQuery中拥有谷歌地图标记的选择器脚本吗？。

提前感谢您的帮助。

这就是你的意思？？列举我的例子：我使用了google.maps.event.trigger(markers[2], 'click');

它奏效了。我从你的事件点击标记中猜错了。我的例子

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>
相关文章：