Javascript Google Maps v3信息窗口addDomListener for HTML按钮_Javascript_Google Maps_Google Maps Api 3_Infowindow

Javascript Google Maps v3信息窗口addDomListener for HTML按钮

javascript google-maps google-maps-api-3

Javascript Google Maps v3信息窗口addDomListener for HTML按钮,javascript,google-maps,google-maps-api-3,infowindow,Javascript,Google Maps,Google Maps Api 3,Infowindow,我有一个简单的谷歌地图的例子 JS文件： /*Standard Setup Google Map*/ var latlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 15, center: latlng, panControl: false, mapTypeControl: true,

我有一个简单的谷歌地图的例子 JS文件：

    /*Standard Setup Google Map*/ 
    var latlng = new google.maps.LatLng(-25.363882,131.044922); 
    var myOptions = { 
        zoom: 15, 
        center: latlng, 
        panControl: false,
        mapTypeControl: true,
        scaleControl: true,
        mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        zoomControl: true,
        zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

    // add Map 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // add Marker
    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(-25.363882,131.044922)
    });

    // add Info Window
    var infoWindow = new google.maps.InfoWindow();

现在，我想在单击“我的html模板”中的按钮时打开信息框：

HTML文件：

<body onload="initialize()">
 ...
 <div id="map_canvas"></div>
 ...
 <button id="test">Click</button>
 ...
</body>


...
...
点击
...

将以下行添加到我的JS文件：

    /*Standard Setup Google Map*/ 
    var latlng = new google.maps.LatLng(-25.363882,131.044922); 
    var myOptions = { 
        zoom: 15, 
        center: latlng, 
        panControl: false,
        mapTypeControl: true,
        scaleControl: true,
        mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        zoomControl: true,
        zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

    // add Map 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // add Marker
    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(-25.363882,131.044922)
    });

    // add Info Window
    var infoWindow = new google.maps.InfoWindow();

    var onMarkerHTMLClick = function() {

        var marker = this;
        var latLng = marker.getPosition();
        var content = '<div style="text-align: center; font-size:14px;"><center><b>Company GmbH</b></center><div>Broadway Str.5</div><div>45132 Canvas</div></div>';

        map.panTo(marker.getPosition());
        map.setZoom(15);

        infoWindow.setContent(content);

        infoWindow.open(map, marker);
     };

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

    google.maps.event.addDomListener(document.getElementById("test"),'click', onMarkerHTMLClick);

var onMarkerHTMLClick=function（）{
var标记=这个；
var latLng=marker.getPosition（）；
var内容='公司GMBH百老汇街545132号'；
map.panTo（marker.getPosition（））；
map.setZoom（15）；
infoWindow.setContent（content）；
信息窗口。打开（地图、标记）；
};
google.maps.event.addListener（映射，'click'，函数（）{
infoWindow.close（）；
});
google.maps.event.addDomListener（document.getElementById（“test”），“单击”，在MarkerHTMLClick上）；

错误：marker.getPosition不是函数

为什么这不起作用？如果我对标记本身的单击功能执行相同操作，则窗口将毫无问题地打开。

您需要触发打开信息窗口的事件。可能最简单的方法是将标记存储在全局数组中，或者如果没有多个标记，只需按ID选择它们

示例

var myButton = document.getElementById('THE_ID');
google.maps.event.addDomListener(myButton, 'click', openInfoWindow);

openInfoWindow只是一个回调函数，您可以在其中触发事件。

您需要触发打开infoWindow的事件。可能最简单的方法是将标记存储在全局数组中，或者如果没有多个标记，只需按ID选择它们

示例

var myButton = document.getElementById('THE_ID');
google.maps.event.addDomListener(myButton, 'click', openInfoWindow);

openInfoWindow只是一个回调函数，您可以在其中触发事件。

按钮不是标记？按钮不是标记？啊，好的，这应该可以，我必须设置var marker=marker1；而不是var标记=此；啊，好的，这应该可以，我必须设置var marker=marker1；而不是var标记=此；