Google Map API を使用して、緯度/経度を使用してユーザーが作成した投稿のマーカーを表示するアプリケーションがあります。私は MarkerClusterer 機能を採用して、マーカーをより適切に整理しました。これは機能しますが、ある種のバグがあります。
基本的に、私はこれを自宅でテストしているので、緯度/経度はすべてのテスト投稿で同じです. MarkerClusterer を使用する前は、マップをズームすると最終的にすべてのマーカーが表示されました。残念ながら、MarkerClusterer を使用して、たとえば、これらのテスト投稿のように非常に接近しているマーカーの数が「5」の場合、クラスターをクリックしても何も表示されません。これらが非常に接近している場合、マーカーは表示されません。繰り返しますが、これらのマーカーは MarkerClusterer なしで表示されます。
MarkerClusterer の他の問題を説明した別の投稿に従って、MarkerClustererPlus v2.0.9 にアップグレードしましたが、問題は解決していません。
この問題についての洞察をいただければ幸いです。
編集: geocodezip は、overlapingmarkerspidifier を提案しました。どんな洞察も大歓迎です。コードは次のとおりです。
function mainGeo()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true} );
}
else
{
alert("Sorry, but it looks like your browser does not support geolocation.");
}
}
var stories = {{storyJson|safe}};
var geocoder;
var map;
var markers = [];
function loadMarkers(stories){
for (i=0;i<stories.length;i++) {
var story = stories[i];
if (story.copy.length > 120) {
story.copy = story.copy.substring(0, 120) + "...";
}
(function(story) {
var pinColor = "69f2ff";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=S|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var point = new google.maps.LatLng(story.latitude, story.longitude);
var marker = new google.maps.Marker({position: point, map: map, icon: pinImage});
var infowindow = new google.maps.InfoWindow({
content: '<div >'+
'<div >'+
'</div>'+
'<h2 class="firstHeading">'+story.headline+'</h2>'+
'<div>'+
'<span>'+story.author+'</span><br />'+
'<span>'+story.city+'</span><br />'+
'<span>'+story.topic+'</span><br />'+
'<p>'+story.date+'</p>'+
'<p>'+story.copy+'</p>'+
'<p><a href='+story.url+'>Click to read story</a></p>'+
'</div>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
markers.push(marker);
})(story);
}
}
function mainMap(position)
{
geocoder = new google.maps.Geocoder();
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var width = window.innerWidth - 80;
size = width;
// Prepare the map options
var mapOptions =
{
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
loadMarkers(stories);
var markerCluster = new MarkerClusterer(map, markers);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function error() {
alert("You have refused to display your location. You will not be able to submit stories.");
}
mainGeo();