gpt4 book ai didi

javascript - Google map + OverlappingMarkerSpiderfier 自定义标记不起作用

转载 作者:行者123 更新时间:2023-12-03 08:45:22 25 4
gpt4 key购买 nike

我正在尝试创建一个包含不同颜色标记的 map ;

红色:http://maps.google.com/mapfiles/ms/icons/red-dot.png黄色:http://maps.google.com/mapfiles/ms/icons/yellow-dot.png

正如您在下面看到的,我使用了 Google Maps API 和 OverlappingMarkerSpiderfier(因为我在同一点设置了一些标记),但所有标记都是红色的(带有标准图标标记,不是我的自定义标记) )

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<title>My test</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script> <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
</head> <style type="text/css">
html, body { height:100%; width:100%;}
</style><body>
<div id="map" style="width:100%; height:100%;"></div>
</body>
<script type="text/javascript">

var locations = [
['test', -27.23, -52.02,1,"http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
['test', -15.79, -47.88,10,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"],
['test', -3.73, -38.52,11,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"]
];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
panControl:false,
zoomControl:true,
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
center: new google.maps.LatLng(20.5, 15.6),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true, markersWontHide: true,keepSpiderfied : true});
var iw = new google.maps.InfoWindow();
oms.addListener('click', function(marker, event) {
iw.setContent(marker.desc);
iw.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
iw.close();
});
oms.addListener('unspiderfy', function(markers) { });

var marker, i;
for (var i = 0; i < locations.length; i ++) {
var datum = locations[i][0];
var loc = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({
position: loc,
title: datum,
map: map,
icon: locations[i][3]
});
marker.desc = datum;
oms.addMarker(marker);
}
</script>
</body>
</html>

有谁知道为什么这不起作用或者我哪里出错了?

提前致谢!

最佳答案

对那些人抱歉,问题是图标中通知的号码。是 4 而不是 3。

var marker = new  google.maps.Marker({
position: loc,
title: datum,
map: map,
icon: locations[i][4]
});

关于javascript - Google map + OverlappingMarkerSpiderfier 自定义标记不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32912123/

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