google maps api v3 - 通过外部点击打开信息窗口答案

【问题标题】：google maps api v3 - open infowindow from an external clickgoogle maps api v3 - 通过外部点击打开信息窗口
【发布时间】：2012-06-03 15:13:46
【问题描述】：

所以我有一个像这样初始化的 V3 地图：

function init() {
        var mapCenter = new google.maps.LatLng(51.5081289,-0.128005);
        var map = new google.maps.Map(document.getElementById('map'), {
          'zoom': 6,
          'center': mapCenter,
          'mapTypeId': google.maps.MapTypeId.ROADMAP, 
          panControl: false,
          mapTypeControl: false,
          zoomControl: true,
          zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_TOP
            },
        });

还有一堆看起来像这样的标记：

var marker25837500 = new google.maps.Marker({
              map: map, 
              pop_title: 'blah blah',                                                                                                 
              pop_wind: 'more blah',
                      zIndex: 999,
              icon: 'images/map_icons/s6.png'
            }); 
            google.maps.event.addListener(marker25837500, 'click', onMarkerClick);

最后我有一个功能可以在点击每个制造商时打开信息窗口：

var infoWindow = new google.maps.InfoWindow;

var onMarkerClick = OpenInfoWindow;

function OpenInfoWindow() {
          var marker = this;
          infoWindow.setContent('<h3>' + marker.pop_title + '</h3>' +
                                         marker.pop_body);

          infoWindow.open(map, marker);
        };
        google.maps.event.addListener(map, 'click', function() {
          infoWindow.close();
        });

我的问题是，当点击页面内部时，我需要做些什么才能使特定标记（例如 marker25837500）显示其信息窗口 - 可能类似于：

<div id="marker25837500">click to see infoWindow!</div>

我确信这很容易，但我只能看到自己的方式！

谢谢

【问题讨论】：

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

【解决方案1】：

您可以使用trigger 事件。

$('#marker25837500').click(function () {
    google.maps.event.trigger(marker25837500, 'click')
})

检查这个-https://developers.google.com/maps/documentation/javascript/reference#event

编辑：还注意到您在单击marker25837500 时调用了onMarkerClick()，但您将另一个函数命名为OpenInfoWindow()，因此您可能也需要更改它。

【讨论】：

hmm - 一直在玩它，它似乎不喜欢它。补充： $('#marker25837500').click(function () { google.maps.event.trigger(marker25837500, 'click'); alert("hello"); });并且还添加了一个具有正确 id 的 div。警报弹出，但地图上什么也没有发生……任何指针？
你能在这个函数中alert(marker25837500) 并检查marker25837500 - 标记变量本身是否在范围内吗？
是的 - 警报给了我 [object HTMLDivElement] - 所以看起来没问题。另外，我错过了我现在添加的 OpenInfoWindow 上方的几行...谢谢
嗯。警报应该显示一个标记对象 - 引用您的代码 var marker25837500 = new google.maps.Marker({... 所以还有其他问题。
是的 - 未捕获的 ReferenceError: marker25837500x 未定义 - 我没有声明正确吗？谢谢...

【解决方案2】：

您不必做任何不寻常的事情或在标记上模拟click；只需确保可以访问 OpenInfoWindow 函数即可：

//This is the simple case:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", OpenInfoWindow );

//Or if you have other things that you want to accomplish when this occurs:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", function() {
    OpenInfoWindow();
    //Do other stuff here
});

只要InfoWindow 在范围内（可以在调用OpenInfoWindow 函数时到达），这应该可以正常工作。

【讨论】：