2014-11-03 108 views
-2

我在一家報警系統公司工作,我們的服務管理軟件中有一個選項可用於導出下個月的報警系統維護,這是由谷歌地圖引起的。當試圖在工程師日預定一切時,這非常有用。我的HTML和CSS知識非常好,但是我的JS幾乎是猜測工作,但還沒有真正學習它!努力實施谷歌地圖集羣

難道你們這些非常有知識的人在這裏幫助我將Google Map引腳CLUSTERING添加到這個現有的導出代碼中嗎?爲了節省時間和空間,我只在示例代碼中包含了一個位置。我花了數小時閱讀,但仍在掙扎。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Multiple Markers</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map_canvas" style="width: 100%; height: 800px;"></div> 

    <script type="text/javascript"> 
    var locations = [ 
["Mr Random Person OPD/0100", "Some Street<br>In England<br>TOWN<br>County<br>BB11 2AA", 51.5137737, -1.1424908, "FE7569"] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: new google.maps.LatLng(51.5137737,-1.1424908), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

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

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     var pinColor = locations[i][4]; 

     var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, 
      new google.maps.Size(21, 43), 
      new google.maps.Point(0, 0), 
      new google.maps.Point(10, 34)); 

     var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", 
      new google.maps.Size(40, 37), 
      new google.maps.Point(0, 0), 
      new google.maps.Point(12, 35)); 

     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
     map: map, 
     icon: pinImage, 
     shadow: pinShadow 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     var content = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
       '</div>'+ 
       '<h2 id="secondHeading" class="secondHeading">'+ 
       locations[i][0]+ 
      '</h2>'+ 
       '<div id="bodyContent">'+ 
       locations[i][1]+ 
      '</div>'+ 
      '</div>'; 

      infowindow.setContent(content); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 
    </script> 
</body> 
</html> 

我基本上是試圖實現這一點:

https://developers.google.com/maps/articles/toomanymarkers/markerclustererfull.png

+1

你沒有提到代碼的特定問題。它做什麼,你期望它做什麼? – wvdz 2014-11-03 09:17:07

+0

在這段代碼中,我刪除了添加地圖標記聚類的嘗試。當縮小以顯示區域內的數量時,我需要將多個標記組合在一起。 – 2014-11-03 09:24:44

+0

以下是一個示例 - https://developers.google.com/maps/articles/toomanymarkers/markerclustererfull.png – 2014-11-03 09:28:12

回答