多標記相同位置谷歌地圖

Question

如何分隔具有相同座標的標記？

我的代碼：

function initialize() { 

    var tasks = [ 
     [ 'title1', 44.833000, -0.567000, ], 
     [ 'title2', 43.617000, 1.450000,], 
     [ 'title3', 43.617000, 1.450000, ], 
    ]; 

    var mapOptions = {zoom: 6, center: new google.maps.LatLng(46.8, 2),} 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < tasks.length; i++) { 

     var latlng = new google.maps.LatLng(tasks[i][2], tasks[i][3]); 

     var existingMarker = tasks[i]; 

     console.log(existingMarker) 

     marker = new google.maps.Marker({ position: latlng, title: tasks[i][1], map: map }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { infowindow.setContent(tasks[i][0]); infowindow.open(map, marker);} })(marker, i)); 
    } 

    } 

我該怎麼辦？ （我刪除了一些例子代碼）

Answer 1

您需要：

1. 首先創建標記聚類器。

2. 將標記添加到MarkerClusterer（並設置您的代碼的格式以便於閱讀...）。

   function createMarker(latlng,text) { 
       var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map 
       }); 
   
       ///get array of markers currently in cluster 
       var allMarkers = mc.getMarkers(); 
   
       //check to see if any of the existing markers match the latlng of the new marker 
       if (allMarkers.length != 0) { 
       for (i=0; i < allMarkers.length; i++) { 
        var existingMarker = allMarkers[i]; 
        var pos = existingMarker.getPosition(); 
   
        if (latlng.equals(pos)) { 
        text = text + " & " + content[i]; 
        }     
       } 
       } 
   
       google.maps.event.addListener(marker, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(text); 
       infowindow.open(map,marker); 
       }); 
       mc.addMarker(marker); 
       return marker; 
   } 
   

working example

甚至看一看的OverlappingMarkerSpiderfier.