谷歌地图中的多个信息窗口

时间:2013-08-30 01:08:34

标签: javascript google-maps google-maps-api-3

我正在开发一个小的phonegap +谷歌地图项目。我有一组放置在地图上的标记locations。现在我想创建在单击标记时弹出的信息窗口。使用下面的代码,它成功地为最后生成的制造商创建了一个信息窗口,但不是之前的。我有一种感觉,我覆盖了相同的变量&再一次,但我还不是很流利。我是否需要创建其中一个变量的数组并将其包含在循环中?

谢谢!

for(var i = 0; i < locations.length; i++ ) {
            var myLatLng = new google.maps.LatLng(locations[i].lat_long.lat, locations[i].lat_long.lon);
            bounds.extend (myLatLng);
            var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              title: locations[i].name,
              zIndex: i
            });
            map.fitBounds(bounds);
            var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                        '<h2 id="firstHeading" class="firstHeading">'+locations.name+'</h2>'+
                        '<div id="bodyContent">'+
                        '</div>'+
                '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
        }
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
            console.log(marker);
        });

1 个答案:

答案 0 :(得分:2)

想通了。做了一个处理它的功能

    for(var i = 0; i < locations.length; i++ ) {
        var myLatLng = new google.maps.LatLng(locations[i].lat_long.lat, locations[i].lat_long.lon);
        bounds.extend (myLatLng);
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: locations[i].name,
          zIndex: i
        });
        map.fitBounds(bounds);
        buildInfoWindow(marker,map,locations[i]);
    }

功能

function buildInfoWindow(marker,map,locations){
    var contentString = '<div id="content">'+
                        '<div id="siteNotice">'+
                        '</div>'+
                            '<h2 id="firstHeading" class="firstHeading">'+locations.name+'</h2>'+
                            '<div id="bodyContent">'+
                            '</div>'+
                    '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
        google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
        console.log(marker);
    });
}