gpt4 book ai didi

javascript - 多个谷歌地图信息窗口

转载 作者:数据小太阳 更新时间:2023-10-29 04:55:04 24 4
gpt4 key购买 nike

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

我让它工作了,但问题是它只显示在加载的最后一个标记上,这是为什么?

这是生成标记和信息窗口的代码。

<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>

最佳答案

我也遇到过这个问题。

这是我修复它的方法:

我使用一个函数将标记绑定(bind)到信息窗口。

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);
});
}

关于javascript - 多个谷歌地图信息窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4381355/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com