通过单击按钮和带有 jQuery 的单独 JS 文件，在 Google 地图标记上触发单击事件

Question

我正在使用 Google Map API v3 anf jQuery 1.11.0.

我有一张Google地图在下面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>

但它不起作用。我认为它不能 select 带有 jQuery 的标记。因为我以前 select 像这样用 jQuery 编辑过地图-

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

调整地图大小。

所以，任何人都可以帮我在 jQuery.

中获得 Google 地图标记的 Selector 脚本
在此先感谢您的帮助。

Answer 1

你是这个意思？？流动我的例子：我用过 google.maps.event.trigger(markers[2], 'click');

它奏效了。我从你点击标记的事件中错了。 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 地图标记上触发单击事件

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

html

javascript

jquery

google-maps

google-maps-api-3