向 Google Maps InfoWindow 内的图像添加 onclick 事件答案

【问题标题】：Adding an onclick event to an image inside a Google Maps InfoWindow向 Google Maps InfoWindow 内的图像添加 onclick 事件
【发布时间】：2017-04-01 02:40:45
【问题描述】：

我正在尝试将 onclick 事件添加到 InfoWindow 内的图像中，以便在单击图像时调用 Javascript 函数。

“name”是地点的名称，“image”是图像的位置。当我单击标记时，它们都显示良好，但当我单击图像时没有任何反应。

我当前的代码是：

var infowindow = new google.maps.InfoWindow({content: name + "</br>" + "<img
onclick='output()' src='images/" + image +     
"'style=height:100px;width:100px;float:none;>"});
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });
    function output()
    {
        $("#output").html("yes");
    }

还有 HTML：

<h1>My First Google Map</h1>

<div id="map" style="width:60%;height:500px"></div>
<div id="output"></div>



</body>

【问题讨论】：

发布的代码对我有用 (fiddle)。请提供一个 minimal reproducible example 来证明您的问题。

标签： javascript image google-maps onclick infowindow

【解决方案1】：

这不是我的答案，但可能会对您有所帮助，在本主题中展示如何在谷歌地图Trigger event with infoWindow or InfoBox on click Google Map API V3 上触发此事件：

   function addMarkers()
    {
        var marker, i;
        var infowindow = new google.maps.InfoWindow({
            disableAutoPan: true
          ,isHidden:false
          ,pixelOffset: new google.maps.Size(-10, -10)
          ,closeBoxURL: ""
          ,pane: "mapPane"
          ,enableEventPropagation: true
        });
        for (var i = 0; i < cityList.length; i++)
        {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                map: map,
                id: i,
                title: cityList[i][0]
            });

            var boxText = document.createElement("div");
            boxText.id = i;
            boxText.className = "labelText" + i;
            boxText.innerHTML = cityList[i][0];
            boxList.push(boxText);

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                var contentString = '<div id="infoWindow">'
                    +'<div id="bodyContent">'
                    +'<p>'
                    + "This location is:<br>"
                    + marker.title
                    +'</p>'
                    +'</div>'
                    + '</div>';

                return function() {
                    infowindow.setContent(boxList[this.id]);
                    infowindow.open(map, marker);
                }
                })(marker, i)); //end add marker listener

                google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {
                        return function() {
                          alert('clicked ' + cityList[i][0])
                        }
                      })(marker, i));
            } //endfor              
        }//end function

【讨论】：