我的谷歌地图脚本出现问题,其中同一位置的标记重叠且用户不可见。 我尝试使用此链接https://github.com/jawj/OverlappingMarkerSpiderfier中提供的OverlappingMarkerSpiderfier编辑我的脚本。但存在重叠问题。没有任何改进。
<script type="text/javascript">
var geocoder;
var map;
// initializing the map
function initialize()
{
// define map center
var latlng = new google.maps.LatLng(40.44694705960048,-101.953125);
// define map options
var myOptions =
{
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.MAP,
scaleControl: true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
// initialize map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// add event listener for when a user clicks on the map
google.maps.event.addListener(map, 'click', function(event) {
findAddress(event.latLng);
});
}
// finds the address for the given location
function findAddress(loc)
{
geocoder = new google.maps.Geocoder();
if (geocoder)
{
geocoder.geocode({'latLng': loc}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
if (results[0])
{
address = results[0].formatted_address;
// fill in the results in the form
document.getElementById('lat').value = loc.lat();
document.getElementById('long').value = loc.lng();
document.getElementById('address').value = address;
}
}
else
{
alert("Geocoder failed due to: " + status);
}
});
}
}
// initialize the array of markers
var markers = new Array();
// the function that adds the markers to the map
function addMarkers()
{
// get the values for the markers from the hidden elements in the form
var lats = document.getElementById('lats').value;
var lngs = document.getElementById('lngs').value;
var addresses = document.getElementById('addresses').value;
var names = document.getElementById('names').value;
var descrs = document.getElementById('descrs').value;
var photos = document.getElementById('photos').value;
var user_names = document.getElementById('user_names').value;
var user_locs = document.getElementById('user_locs').value;
var las = lats.split(";;")
var lgs = lngs.split(";;")
var ads = addresses.split(";;")
var nms = names.split(";;")
var dss = descrs.split(";;")
var phs = photos.split(";;")
var usrn = user_names.split(";;")
var usrl = user_locs.split(";;")
// for every location, create a new marker and infowindow for it
for (i=0; i<las.length; i++)
{
if (las[i] != "")
{
// add marker
var loc = new google.maps.LatLng(las[i],lgs[i]);
var marker = new google.maps.Marker({
position: loc,
map: window.map,
title: nms[i]
});
markers[i] = marker;
var contentString = [
'<div id="tabs">',
'<div id="tab-1">',
'<p><span>'+nms[i]+'</span></p>',
'<p><img src="./photos/'+phs[i]+'"/></p>'+
'</div>',
'<div id="tab-3">',
'<p><a href="trainer-profile.php?id='+usrn[i]+'"><img src="images/b-line.jpg"/></a></p>',
'</div>',
'</div>'
].join('');
var infowindow = new google.maps.InfoWindow;
bindInfoWindow(marker, window.map, infowindow, contentString);
}
}
}
// make conection between infowindow and marker (the infowindw shows up when the user goes with the mouse over the marker)
function bindInfoWindow(marker, map, infoWindow, contentString)
{
google.maps.event.addListener(marker, 'mouseover', function() {
map.setCenter(marker.getPosition());
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
$("#tabs").tabs();
});
}
// highlighting a marker
// make the marker show on top of the others
// change the selected markers icon
function highlightMarker(index)
{
// change zindex and icon
for (i=0; i<markers.length; i++)
{
if (i == index)
{
markers[i].setZIndex(10);
markers[i].setIcon('http://www.google.com/mapfiles/arrow.png');
}
else
{
markers[i].setZIndex(2);
markers[i].setIcon('http://www.google.com/mapfiles/marker.png');
}
}
}
</script>
提前致谢。