我和我的团队正在开展一个小组项目，该项目描绘了德克萨斯州大学城周围的事件。大多数标记位于一个坐标，因此我们尝试将OverlappingMarkerSpidifier代码与我们的代码集成，但我不太清楚如何做到这一点。任何人都可以帮忙吗？
代码在很大程度上起作用，或者至少标记填充在他们需要的位置，并且我可以获得一个信息窗口以弹出最顶层的标记。主要问题是要解决这个问题（来自上述网站）：
for (var i = 0; i < window.mapData.length; i ++) {
var datum = window.mapData[i];
var loc = new L.LatLng(datum.lat, datum.lon);
var marker = new L.Marker(loc);
marker.desc = datum.d;
map.addLayer(marker);
oms.addMarker(marker); // <-- here
}
代替将循环我们的数据。
注意：原始代码中包含JSON值，但此帖子已删除。另外，由于这可能会有所不同，我们对JSON数据进行了硬编码（我知道，这是一种糟糕的做法，但我们当时需要这样做才能开始使用地图代码本身）
<html>
<head>
<style>
#mapcanvas {
height: 300px;
margin: 0px;
padding: 300px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script>
//Load and center map on college station
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(30.628769, -96.334816)
};
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
//Create info window
var infowindow = new google.maps.InfoWindow({
content: ''
});
//Get and parse JSON data
$(document).ready(function(){
$("button").click(function(){
$.each(data.items, handleItem);
});
});
function handleItem(i, items) {
$('#placeholder').append("<li>Coord: " + items.lat + items.long + "Category:" + items.category + "</li>");
//Info window content
var contentString = '<div id=content">'+
'Incident Notice'+
'</div>'+
'<p id = "firstHeading" class="firstHeading">' + items.category + '<br></br>' + items.lat + ", " + items.long + '</p>' +
'</div>'
'Location: Texas A&M'
var img = 'http://www.google.com/mapfiles/marker.png';
var myLatLng = new google.maps.LatLng(items.lat, items.long);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: img
});
//Create info window on click and close when clicking a new marker
var oms = new OverlappingMarkerSpiderfier(map);
oms.addListener('click', function(marker, event) {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
iw.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(usualColor));
markers[i].setShadow(shadow);
}
});
oms.addMarker(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapcanvas"></div>
<button>Get and Parse</button>
<p>
</p>
<ul id="placeholder">
</ul>
</body>
</html>
答案 0 :(得分：3)
您的代码存在许多问题：
oms声明为全局变量，只有一个实例，这样可以方便使用; iconWithColor未定义; shadow未定义; iw.close();。 iw未定义，并且不是click侦听器中添加的infoWindow.close();。将函数体更改为<html>
<head>
<style>
#mapcanvas {
height: 300px;
margin: 0px;
padding: 300px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script>
var map;
var oms;
//Create info window (need only one)
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(30.628769, -96.334816)
};
//Load and center map on college station
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
oms = new OverlappingMarkerSpiderfier(map);
// listeners need to be registered only once
oms.addListener('click', function(marker, event) {
infowindow.setContent(marker.description);
infowindow.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i++) {
// markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
infowindow.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i++) {
// markers[i].setIcon(iconWithColor(usualColor));
// markers[i].setShadow(shadow);
}
});
function handleItem(items) {
$('#placeholder').append("<li>Coord: " + items.lat + items.long + " Category: " + items.category + "</li>");
//Info window content
var contentString = '<div id=content">'+
'Incident Notice'+
'</div>'+
'<p id = "firstHeading" class="firstHeading">' + items.category + '<br></br>' + items.lat + ", " + items.long + '</p>' +
'</div>'
'Location: Texas A&M'
var img = 'http://www.google.com/mapfiles/marker.png';
var myLatLng = new google.maps.LatLng(items.lat, items.long);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: img
});
// to be possible in "click" show specific content
marker.description = contentString;
oms.addMarker(marker);
}
//Get and parse JSON data
$(document).ready(function(){
$("button").click(function(){
$.each(data.items, handleItem);
});
});
var item = {
lat: 30.628769,
long: -96.334816,
category: "Category - "
};
// for test only
for(var i = 5; i >= 0; i--) {
item.category += i;
handleItem(item);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapcanvas"></div>
<button>Get and Parse</button>
<p></p>
<ul id="placeholder">
</ul>
</body>
</html>; 举个例子，可以帮到你：
div.container { width: 970px !important; }