谷歌地图API v3 - 通过外部单击打开信息窗口

google maps api v3 - open infowindow from an external click

本文关键字:信息 信息窗 窗口 单击 外部 v3 API 谷歌地图      更新时间:2023-09-26

所以我有一个像这样初始化的 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>

我相信这很容易,但我只是可以看到我的方式!

谢谢

您可以使用

trigger事件。

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

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

编辑:还注意到单击marker25837500时您正在调用onMarkerClick(),但您将其他函数命名为OpenInfoWindow()因此您可能也需要更改它。

您不必做任何异常操作或在标记上模拟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函数时可以访问),这应该可以正常工作。