多个Google地图infowindow [英] Multiple Google Maps infowindow

问题描述

目前我有一个谷歌地图，它会在我的数据库中显示地图上的一些标记...我想在用户点击标记时添加一个信息窗口。

我得到它的工作，但问题是它只显示在最后一个被加载的标记，为什么是这样？

以下是生成的代码标记和infowindow。

 < script type =text / javascript> 
函数initialize（）{
 var myOptions = {
 zoom：3，
 center：new google.maps.LatLng（41.850033，-87.6500523），
 disableDefaultUI： true，
 navigationControl：true，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 var map = new google.maps.Map（document.getElementById（map_canvas） ，myOptions）; 
 
 setMarkers（地图，办公室）; 
} 
 
 
 / ** 
 *由名称，LatLng和zIndex组成的标记的数据，用于
 *这些标记的顺序标记应显示在每个
 *之上。 
 * / 
 var offices = [< cfoutput>＃officeList＃< / cfoutput>]; 
 
函数setMarkers（地图，位置）{
 //向地图添加标记
 //标记大小表示为X的大小，Y 
 //其中图像的原点（0,0）位于图像左上方的
 //。 
 //标记的起点，锚点位置和坐标
 //沿X方向向右增加，在
 //向下Y方向增加。 
 var image = new google.maps.MarkerImage（'images / pin.png'，
 //这个标记宽20像素，高32像素。
 new google.maps.Size 
 //这张图片的原点是0,0 
 new google.maps.Point（0，0），
 //这张图片的锚点是旗杆底部为0.32。
 new google.maps.Point（0，32））; 
 
 for（var i = 0; i< locations.length; i ++）{
 var office = locations [i]; 
 var myLatLng = new google.maps.LatLng（office [1]，office [2]）; 
 
 var marker = new google.maps.Marker（{
 position：myLatLng，
 map：map，
 icon：image，
 title：office [0]，
 zIndex：office [3] 
}）; 
 
 var contentString =Hello !!!; 
 var infowindow = new google.maps.InfoWindow（{
 content：contentString 
}）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.open（map，marker）; 
}）; 
} 
} 
< / script> 
  

解决方案

我也偶然发现了这个问题。 p>

下面是我如何解决它的问题：

我使用了一个函数来将标记绑定到infowindow。

  var marker = new google.maps.Marker（{
位置：myLatLng，
 map：map，
图标：图像，
标题：office [0]，
 zIndex：office [3] 
}）; 
 
 var contentString =Hello !!!; 
 var infowindow = new google.maps.InfoWindow; 
 
 bindInfoW（marker，contentString，infowindow）; 
 
 
 
函数bindInfoW（marker，contentString，infowindow）
 {
 google.maps.event.addListener（marker，'click'，function （）{
 infowindow.setContent（contentString）; 
 infowindow.open（map，marker）; 
}）; 
} 
  

Current I have a google maps that will display some markers on the map from my DB... I would like to add a infowindow when the users click on the marker.

I got it to work, but the problem is that it only display on the last marker that was loaded, why is that?

Here is the code to generate the marker and the infowindow.

<script type="text/javascript">
function initialize() {
    var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(41.850033, -87.6500523),
        disableDefaultUI: true,
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    setMarkers(map, offices);
}


/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var offices = [<cfoutput>#officeList#</cfoutput>];

function setMarkers(map, locations) {
    // Add markers to the map
    // Marker sizes are expressed as a Size of X,Y
    // where the origin of the image (0,0) is located
    // in the top left of the image.
    // Origins, anchor positions and coordinates of the marker
    // increase in the X direction to the right and in
    // the Y direction down.
    var image = new google.maps.MarkerImage('images/pin.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    new google.maps.Size(14, 26),
    // The origin for this image is 0,0.
    new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at 0,32.
    new google.maps.Point(0, 32));

    for (var i = 0; i < locations.length; i++) {
        var office = locations[i];
        var myLatLng = new google.maps.LatLng(office[1], office[2]);

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: office[0],
            zIndex: office[3]
        });

        var contentString = "Hello!!!";
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
    }
}
</script>

解决方案

I've also stumbled across this problem.

Here's how I fixed it:

I used a function to bind a marker to an infowindow.

var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: office[0],
            zIndex: office[3]
        });

var contentString = "Hello!!!";
var infowindow = new google.maps.InfoWindow;

bindInfoW(marker, contentString, infowindow);

}

function bindInfoW(marker, contentString, infowindow)
{
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });
}

这篇关于多个Google地图infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！