javascript - 通过单击按钮和带有 jQ​​uery 的单独 JS 文件,在 Google map 标记上触发单击事件

标签 javascript jquery html google-maps google-maps-api-3

我正在使用 Google Map API v3 和 jQuery 1.11.0。

我在下面的 div 中有一个 Google map -

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

map 有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 的另一部分(外部 map )有一个按钮,就像这样-

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

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

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

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

但它不起作用。我认为它不能用 jQuery 选择标记。 因为我以前用 jQuery 选择 map 是这样的-

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

调整 map 大小。

那么,任何人都可以帮助我获得 jQuery 中 Google map 标记的选择器脚本

在此先感谢您的帮助。

最佳答案

这就是你的意思?? 流动我的例子: 我使用了 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>

关于javascript - 通过单击按钮和带有 jQ​​uery 的单独 JS 文件,在 Google map 标记上触发单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28497023/

相关文章:

javascript - Window.prototype.confirm 和 Window.confirm 的区别

jquery - 有没有办法根据 jQuery 中的 DOM 元素生成 CSS 选择器

javascript - 使输入元素不可见

html - 如何在每次迭代时延迟播放 css?

javascript - 如何隐藏和显示表格行中的元素以允许内联编辑

javascript - 使用输入掩码格式化百分比

javascript - 如何用 grunt 替换副本上的模板变量?

javascript - 克隆每个元素追加下一个元素

html - 滚动 - 使用页面/浏览器滚动条仅滚动特定的 div 元素

javascript - 防止 jQuery 操作动态插入的 XML 字符串