我是谷歌地图API的新手。我们已经开发了与mapsclusterer集成的google maps API，并且所有节点都是集群的。但问题在于具有相同坐标的节点。它们是重叠的，只有第一个节点可见。
我使用OverlappingMarkerSpiderfier解决方案经历了很多线程。但我面临的问题是我无法将其与现有代码集成。
在当前代码中，我们实际上循环遍历数据并使用markerhtml作为标记消息创建相同的标记，然后调用一个函数，该函数调用clicklistener方法的click函数，该函数将marker和markerhtml作为输入，将setcontent作为infoWindow。最后，我们将标记添加到标记数组中。
我对这个问题的解释可能不合适，因为我是新手并且正在学习。任何人都可以指导我将现有的markerclusterer与spiderify整合的步骤。
的index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript" src="js/oms.min.js"></script>
<script type="text/javascript" src="js/microajax.js"></script>
<script type="text/javascript" src="js/splitter.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link href="main.css" charset="UTF-8" rel="stylesheet" type="text/css" media="all">
<link href="map.css" charset="UTF-8" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="main.css">
<style type="text/css" media="all">
.style2 {
background-color: #000000;
color: #FFFFFF;
}
.style4 {
font: 13px Arial, Helvetica, sans-serif;
}
.hide{
visibility: hidden
}
</style>
<script type="text/javascript">
</script>
</head>
<body style="background-color: white;">
<div id="map"></div>
</body>
</html>
map.js
// Show the overlay layered and popup div
function showPopup(id) {
var overlaypopup = document.getElementById('dialog-overlay');
overlaypopup.style.display = 'block';
var popup = document.getElementById(id);
popup.style.display = 'block';
}
// Hide the overlay layered and popup div
function hidePopup(id) {
var overlaypopup = document.getElementById('dialog-overlay');
overlaypopup.style.display = 'none';
var popup = document.getElementById(id);
popup.style.display = 'none';
}
// Inventory file Path and inventory names variables
var INVENTORY_FILE_PATH = '<inventory_Data>'
var INVENTORY_TYPE_AB = 'AB';
var INVENTORY_TYPE_MF = 'MF';
var INVENTORY_TYPE_PF = 'PF';
var RED_STATUS =2;
var BLUE_STATUS =1;
var GREEN_STATUS =0;
// Default google map init variables
var MAP_INIT_LAT = 22;
var MAP_INIT_LNG = 80;
var MAP_INIT_ZOOM = 4;
//var MAP_INIT_MAX_ZOOM = 16;
// Marker Cluster init params
var MAX_MAP_CLUSTER_ZOOM = 13;
var MAX_MAP_CLUSTER_GRIDSIZE = 50;
// Link to icons for inventory
var BLUE = './images/blue_oneLinkDown.png';
var RED = './images/red_siteDown.png';
var GREEN = './images/green_allLinkUp.png';
var MARKER_INFO_WINDOW_WIDTH = 50;
var MARKER_INFO_WINDOW_HEIGHT = 50;
var REFRESH_TIME = 10000 * 1500;
var markerSearch; //
var map;
var oms;
var markers = [];
var filterMarker = [];
//var markerWindowHtmls = [];
var markerCluster = null;
var mcOptions = {gridSize: MAX_MAP_CLUSTER_GRIDSIZE, maxZoom: MAX_MAP_CLUSTER_ZOOM};
var searchedMarker;
var idleMapZoomListener;
// Bounds for United Kingdom
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(8.13, 77.42),
new google.maps.LatLng(33.04, 76.79)
);
// Marker information window
var markerInfowindow = new google.maps.InfoWindow(
{ content: '',
size: new google.maps.Size( MARKER_INFO_WINDOW_WIDTH, MARKER_INFO_WINDOW_HEIGHT)
});
// Initilize and load the google map when page is loaded
function initialize() {
var center = new google.maps.LatLng(MAP_INIT_LAT,MAP_INIT_LNG);
map = new google.maps.Map(document.getElementById('map'), {
zoom: MAP_INIT_ZOOM,
//maxZoom: MAP_INIT_MAX_ZOOM,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
alert("TEST");
// Create OverlappingMarkerSpiderfier instsance
oms = new OverlappingMarkerSpiderfier(map);
alert(oms);
microAjax(INVENTORY_FILE_PATH, processMarkers );
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (strictBounds.contains(map.getCenter())) {
return;
}
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// This is necessary to make the Spiderfy work
oms.addListener('click', function(marker)
{
markerInfowindow.setContent(marker.desc);
markerInfowindow.open(map, marker);
});
}
function attachMarkerMessage(marker, message) {
alert("Inside attachMarkerMessage");
/*google.maps.event.addListener(marker, 'click', function() {
markerInfowindow.setContent(message);
markerInfowindow.open(map,marker);
});*/
}
// Reads the inventory file and creates all Marker for each item.
processMarkers = function (markerdoc) {
lines = markerdoc.split("\n");
var lat;
var lng;
var marker;
var markerHtml;
var markerLatLng;
var lineSplit = [];
var currMarkerIcon;
var option;
var searchMarkerSelect = document.getElementById("markerSearchSelect");
for (var i=0; i < lines.length; i++) {
if ( lines[i].length > 1) {
lineSplit = lines[i].split(",");
if ( lineSplit.length == 16 ) {
lat = parseFloat(lineSplit[12]);
lng = parseFloat(lineSplit[13]);
if (lat != 'NaN' & lng != 'NaN')
{
if (lineSplit[14] == GREEN_STATUS) {
currMarkerIcon = GREEN;
}
else if (lineSplit[14] == RED_STATUS)
{
currMarkerIcon = RED;
}
else if (lineSplit[14] == BLUE_STATUS)
{
currMarkerIcon = BLUE;
}
markerLatLng = new google.maps.LatLng( parseFloat(lineSplit[12]), parseFloat(lineSplit[13]) );
marker = new google.maps.Marker({
position: markerLatLng,
title: lineSplit[1],
optimized: false,
icon: currMarkerIcon
});
marker.set('LOCATION', lineSplit[0].trim());
markerHtml = '<span style=\'font-family: Arial;font-size:12px;\'>LOCATION: <b>' + lineSplit[0]+'</span>';
marker.desc = markerHtml;
alert(marker.desc);
//attachMarkerMessage (marker, markerHtml);
oms.addMarker(marker);
alert(oms);
markers.push(marker);
}
}
}
}
if ( markerCluster == null ) {
markerCluster = new MarkerClusterer(map, filterMarker, {imagePath: 'images/m', maxZoom: 15});
} else {
markerCluster.clearMarkers();
markerCluster.addMarkers(filterMarker, false);
//markerCluster.redraw();
}
}
function showMarkerInfo(index){
hidePopup('popup');
idleMapZoomListener = google.maps.event.addListener(map, 'idle', function() {
google.maps.event.trigger(filterMarker[index], "click");
google.maps.event.removeListener(idleMapZoomListener);
});
if (map.getZoom() == 16 ) {
map.setZoom(17);
} else {
map.setZoom(16);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
无法创建实例 oms = new OverlappingMarkerSpiderfier（map）;
未捕获的ReferenceError：未定义OverlappingMarkerSpiderfier