2013-07-17 27 views
3

我想檢查是否有任何現有的標記與新標記的緯度相匹配,如果是,則合併信息窗口/工具提示文本。谷歌地圖具有完全相同位置的多個標記不起作用

這就是我試圖做的:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title></title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 


<script type="text/javascript"> 
var map; 
var mc;//marker clusterer 
var mcOptions = {gridSize: 10, maxZoom: 8}; 
var infowindow = new google.maps.InfoWindow();//global infowindow 
var geocoder = new google.maps.Geocoder(); //geocoder 
var address = new Array("42.3334,-89.1572", 
"39.2058,-76.7531", 
"39.7751,-86.1322", 
"40.4894,-78.3499", 
"42.0203,-87.9059", 
"36.2673,-86.2912", 
"33.6115,-84.3745", 
"44.9793,-93.273", 
"40.1461,-76.0738", 
"32.2911,-90.1927", 
"32.9315,-96.6158", 
"36.0553,-79.8317", 
"41.8397,-88.0887", 
"47.8029,-103.267", 
"34.106,-83.589", 
"41.5907,-87.3199", 
"43.0905,-74.3554", 
"40.3438,-74.4289", 
"40.8651,-96.8231", 
"40.8651,-96.8231", 
"41.759,-88.1524", 
"38.2512,-86.8675", 
"41.8119,-87.6873", 
"41.3651,-89.0866", 
"25.7791,-80.1978", 
"41.6404,-88.0696", 
"41.7684,-88.1366", 
"39.7299,-86.4234", 
"41.5234,-81.5996", 
"41.6233,-88.0225", 
"41.0171,-80.8029", 
"40.2899,-82.9811", 
"41.8119,-87.6873", 
"32.3445,-99.8021", 
"41.8119,-87.6873", 
"29.8131,-95.3098", 
"35.1693,-89.9904", 
"33.6115,-84.3745", 
"47.7374,-103.298", 
"46.3502,-94.1", 
"41.9907,-88.4298", 
"35.3716,-80.5621", 
"38.189,-85.6768", 
"41.8119,-87.6873", 
"32.7714,-97.2915"); 
var content = new Array("UnitNo1", 
"UnitNo2", 
"UnitNo3", 
"UnitNo4", 
"UnitNo5", 
"UnitNo6", 
"UnitNo7", 
"UnitNo8", 
"UnitNo9", 
"UnitNo10", 
"UnitNo11", 
"UnitNo12", 
"UnitNo13", 
"UnitNo14", 
"UnitNo15", 
"UnitNo16", 
"UnitNo17", 
"UnitNo18", 
"UnitNo19", 
"UnitNo20", 
"UnitNo21", 
"UnitNo22", 
"UnitNo23", 
"UnitNo24", 
"UnitNo25", 
"UnitNo26", 
"UnitNo27", 
"UnitNo28", 
"UnitNo29", 
"UnitNo30", 
"UnitNo31", 
"UnitNo32", 
"UnitNo33", 
"UnitNo34", 
"UnitNo35", 
"UnitNo36", 
"UnitNo37", 
"UnitNo38", 
"UnitNo39", 
"UnitNo40", 
"UnitNo41", 
"UnitNo42", 
"UnitNo43", 
"UnitNo44", 
"UnitNo45"); 

//min and max limits for multiplier, for random numbers //keep the range pretty small, so markers are kept close by 
var min = .999999; 
var max = 1.000001; 

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]; 
       }     
       } 
       } 
// WHERE TO ADD: mc.addMarker(marker); //?? 

google.maps.event.addListener(marker, 'click', function() { 
infowindow.close(); 
infowindow.setContent(text); 
infowindow.open(map,marker); 
}); 
return marker; 
} 

function initialize(){ 
var options = { 
zoom: 4, 
center: new google.maps.LatLng(39.8282,-98.5795), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById('map'), options); 

var gmarkers = []; 
for (i=0; i<address.length; i++) { 
var ptStr = address[i]; 
var coords = ptStr.split(","); 
var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1])) 
gmarkers.push(createMarker(latlng,content[i])); 
} 

//marker cluster 
mc = new MarkerClusterer(map, gmarkers, mcOptions); 
for (i=0; i<address.length; i++) { 
geocodeAddress(address[i],i); 

} 
} 
</script> 
<style> 
html, body, #map { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    } 
</style> 
</head> 
<body onload="initialize();"> 
<div id="map"></div> 
</body> 
</html> 

我累了把這裏找到http://www.geocodezip.com/SO_OverQueryLimitB.html該工作示例,並添加以下代碼到其中:

 ///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]; 
     }     
     } 
     } 

所以最後的結果時,您點擊一個具有相同緯度的標記,它將顯示一個信息窗口,其中包含合併後的文字,例如此處找到的文字http://maps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html請參閱顯示數字4,但僅顯示3個標記,這是因爲右側的標記與anoth合併呃一個在它後面,當你點擊它時,它會顯示你的文本。只有我想使用geocodezip的例子,並在此基礎上進行工作,因爲我已經有了這些線,並且不需要谷歌去爲我獲取它們。 謝謝你剛纔閱讀這個長問題,如果注意其他..

和謝謝1MILL X如果你能幫我找到解決方案。

再次感謝!

+0

包含該代碼的帖子中的[working example](http://stackoverflow.com/questions/17682181/google-maps-over-query-limit-but-have-long-and-lat/17683467#17683467)不會產生該錯誤。 – geocodezip

+1

正確,現在我試圖合併該工作示例到這裏找到的這個例子http://maps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html – compcobalt

+1

如果我把你的數據在我的例子中它的作品http:// www.geocodezip.com/SO_OverQueryLimitB.html,如果您嘗試重新添加地理編碼,您將遇到一些挑戰。請澄清你的問題。 – geocodezip

回答

19

您需要:

  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

+3

令人驚訝的是你如何使這看起來如此簡單,我試圖很難理解這一點,它是甚至不好笑。非常感謝你的存在:)和超級好心的解釋我所有這些,甚至提供一個工作的例子,你真的很棒。 – compcobalt

1

同樣的例子我已經修改和顯示文本,而不是信息窗口數據, 如果是的話,會顯示一個DIV,如果它是一個以上的則將顯示輪盤......請檢查例子...

Clustered Maps Multiple markers with the exact same location 

Example

相關問題