Google maps api 3 单击Google Map API V3时使用infoWindow或InfoBox触发事件

我想知道当我使用Google Maps API v3单击信息窗口时如何触发事件。在本例中，当我单击一个标记时，一个信息窗口将显示一条唯一的消息，该消息基于我单击的标记。我想也能够点击信息窗口，并有一个警告显示，说

“您单击了（\uu填写空白位置）的信息窗口”

我发现了一些使用GoogleMapsAPIv2和jQuery的示例，但不仅仅是使用普通的GoogleMapsAPIv3

带谷歌地图的jQuery手机-谷歌地图jQuery插件
var cityList=[
[Chicago'，41.850033，-87.6500523,1]，
[Illinois'，40.797177，-89.406738,2]
];
var demoCenter=newgoogle.maps.LatLng（41，-87）；
var映射；
函数初始化（）
{
map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：7，
中心：人口中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
添加标记（）；
}
函数addMarkers（）
{
var标记，i；
var infowindow=new google.maps.infowindow（）；
对于（i=0；i”
+marker.title
+“
”
+''
+ '';
返回函数（）{
setContent（contentString）；
信息窗口。打开（地图、标记）；
google.maps.event.addListener（信息窗口，'click'，（函数（i）{
警报（“您点击了“+cityList[i][0]”的信息窗口）；
}));
}
})（marker，i））；
}
}
例子
返回

---

更新我最后也为InfoBox解决了这个问题，我的答案如下。

好的，我为

infoWindow

解决了这个问题，但后来我也为

InfoBox解决了这个问题，因为它更漂亮，更可定制。我是JavaScript新手，这些闭包可能非常棘手

用于
信息窗口


带谷歌地图的jQuery手机-谷歌地图jQuery插件
var cityList=[
[Chicago'，41.850033，-87.6500523,1]，
[Illinois'，40.797177，-89.406738,2]
];
var demoCenter=newgoogle.maps.LatLng（41，-87）；
var映射；
函数初始化（）
{
map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：7，
中心：人口中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
添加标记（）；
}
var-boxText1=document.createElement（“div”）；
boxText1.id=“boxText1”；
boxText1.className=“labelText1”；
boxText1.innerHTML=“title1”//这是前面创建的
var-boxList=[]；
函数addMarkers（）
{
var标记，i；
var infowindow=new google.maps.infowindow({
真的吗
，isHidden:错
，pixelOffset:new google.maps.Size（-10，-10）
，closeBoxURL:“
，窗格：“地图窗格”
，enableEventPropagation:true
});
对于（变量i=0；i”
+marker.title
+“
”
+''
+ '';
返回函数（）{
setContent（boxList[this.id]）；
信息窗口。打开（地图、标记）；
}
})（标记，i））；//结束添加标记侦听器
google.maps.event.addDomListener（框列表[i]，'click'，（函数（标记，i））{
返回函数（）{
警报（'单击'+城市列表[i][0]）
}
})（marker，i））；
}//结束
}//端函数
例子
例子
返回
信息窗口对象没有“单击”事件，因此无法执行此操作

google.maps.event.addListener(infowindow, 'click',....

相反，您可以将事件处理程序附加到DOM对象，例如

function addMarker(latLng, name){

var marker = new google.maps.Marker({
    map:map,
    position:latLng
});

G.event.addListener(marker,'click',function(mev){
        var div = document.createElement('div');
        div.innerHTML = name;
        div.onclick = function(){iwClick(name)};
        infoWindow.setContent(div);
        infoWindow.setPosition(mev.latLng);
        infoWindow.open(map);

    });
}

function iwClick(str){
    alert(str);
};

你把它叫做

var chicago = new google.maps.LatLng(41.850033, -87.6500523);
addMarker(chicago,'chicago');

Thanx！Erin就是那个人！你解决了我的问题！我已经抨击了它4天了！如果你是新手，闭包是件痛苦的事

这是我的工作代码（SenchaTouch2和GoogleMapsAPIv3）。它将允许打开一个信息窗口

var openedInfoWindow = null;
var boxList = [];
var marker, i;

//build info box object
var infoWindow = new google.maps.InfoWindow({
    enableEventPropagation: true,
});

//handle close
google.maps.event.addListener(infoWindow, 'closeclick', function() {
    openedInfoWindow = null;
});

//loop trough store data...
for(i in data) {
    //data
    var itemData = data[i].getData();

    //marker
    var geopos = new google.maps.LatLng(itemData['lat'], itemData['lng']);
    var marker = new google.maps.Marker({
        position: geopos,
        //icon: image,
        map: map,
        title: itemData['title'],
        id: i,
        animation: google.maps.Animation.DROP
    });

    //add info window content to DOM
    var boxText = document.createElement("div");
    boxText.id = i;
    boxText.className = "labelText" + i;
    boxText.data = itemData;
    boxText.innerHTML = '<b>' + itemData['title'] + '</b>' + (itemData['distance'] ? ' (' + itemData['distance'] + ')' : '') + '<br />' + (itemData['address'] != itemData['title'] ? itemData['address'] : '') + (itemData['price'] ? '<br />' + itemData['price'] : '') + '<br /><a class="button">Meer info</a>';
    boxList.push(boxText);

    //add marker click event
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        if (openedInfoWindow != null)
            openedInfoWindow.close();

        return function() {
            infoWindow.setContent(boxList[this.id]);
            infoWindow.open(map, marker);
            openedInfoWindow = infoWindow;
        }
    })(marker, i));

    //when infowindow is clicked, open view...
    google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {
        return function(){
            iStuddy.app.pushView('kames_detail',boxList[i].data);
        }
    })(marker, i));
}

var openedinfown=null；
var-boxList=[]；
var标记，i；
//生成信息框对象
变量i
<InfoWindow  onCloseClick={props.onToggleOpen}>
     <div onClick={()=>{alert('hello')}} class="wow slideInLeft">
        <img src="https://i.imgur.com/7IgBxnH.jpg" width="150px" />
        <div>nhà trọ cho thuê</div>
         <div>1.500.000đ</div>
     </div>
 </InfoWindow>

    <InfoWindow
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}
        onOpen={e => {
          this.onInfoWindowOpen(this.props, e);
        }}
      >
        <div id="xyz" />
      </InfoWindow>

    onInfoWindowOpen = () => {
        const button = (<button 
        onClick={
            () => {
            this.viewClinic(this.state.selectedPlace.slug)
            }
            }>
            View Details
        </button>);
        ReactDOM.render(React.Children.only(button),document.getElementById("xyz"));
        }