谷歌地圖羣集 - Javascript

Question

我在我的網站使用谷歌地圖，我想通過使用谷歌羣集處理地圖上的多標記。我已閱讀文檔並按照步驟操作，但是向腳本添加新集羣時未加載映射。

我是新來的谷歌地圖API，我想添加羣集功能到我的網站。感謝您的任何幫助。

function initMainMap() { 
     var map; 
     var bounds = new google.maps.LatLngBounds(); 

     var mapOptions = { 
      zoom:5, 
      scrollwheel: false, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 

     // Display a map on the page 
     map = new google.maps.Map(document.getElementById("main-map"), mapOptions); 
     map.setTilt(45); 

     // Multiple Markers 
     var markers = [ 
      ['Test, Test', 33.890396,35.506160], 
      ['Test, Test', 33.880007,35.514207], 
      ['Test, Test', 33.880007,35.518207], 
      ['Berytech Al Mathaf, Beirut', 33.880307,35.514507], 
      ['Berytech Al Mathaf, Beirut', 33.880407,35.516607] 
     ]; 

     // Info Window Content 
     var infoWindowContent = [ 
      ['<div class="info_content">' + 
      '<h3>Test</h3>' + 
      '<p>Test</p>' +  '</div>'], 
      ['<div class="info_content">' + 
      '<h3>Test</h3>' + 
      '<p>Test</p>' + 
      '</div>'] 
     ]; 

     // Display multiple markers on a map 
     var infoWindow = new google.maps.InfoWindow(), marker, i; 

     // Loop through our array of markers & place each one on the map 
     for(i = 0; i < markers.length; i++) { 
      var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
      bounds.extend(position); 
      marker = new google.maps.Marker({ 
       position: position, 
       map: map, 
       title: markers[i][0] 
      }); 

      // Allow each marker to have an info window 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infoWindow.setContent(infoWindowContent[i][0]); 
        infoWindow.open(map, marker); 
       } 
      })(marker, i)); 

      // Automatically center the map fitting all markers on the screen 
      map.fitBounds(bounds); 
     } 

     // Call the resize function for a responsive container 
     google.maps.event.addDomListener(window, "resize", function() { 
      var center = map.getCenter(); 
      google.maps.event.trigger(map, "resize"); 
      map.setCenter(center); 
     }); 

     // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
     var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
      this.setZoom(14); 
      google.maps.event.removeListener(boundsListener); 
     }); 

    } 

Answer 1

只需在您的代碼中添加一個MarkerClusterer並添加標記即可。

// before the loop 
var markerClusterer = new MarkerClusterer(map, [], {imagePath: "http://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"}); 

// inside the loop 
markerClusterer.addMarker(marker); 

代碼片段：

function initMainMap() { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var mapOptions = { 
 
    zoom: 5, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    // Display a map on the page 
 
    var map = new google.maps.Map(document.getElementById("main-map"), mapOptions); 
 

 
    var infoWindow = new google.maps.InfoWindow(), 
 
    marker, i; 
 
    var markerClusterer = new MarkerClusterer(map, [], { 
 
    imagePath: "http://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m" 
 
    }); 
 
    // Loop through our array of markers & place each one on the map 
 
    for (i = 0; i < markers.length; i++) { 
 
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
 
    bounds.extend(position); 
 
    marker = new google.maps.Marker({ 
 
     position: position, 
 
     map: map, 
 
     title: markers[i][0] 
 
    }); 
 
    markerClusterer.addMarker(marker); 
 
    // Allow each marker to have an info window 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infoWindow.setContent(infoWindowContent[i][0]); 
 
     infoWindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    } 
 
    // Automatically center the map fitting all markers on the screen 
 
    map.fitBounds(bounds); 
 
    // Call the resize function for a responsive container 
 
    google.maps.event.addDomListener(window, "resize", function() { 
 
    var center = map.getCenter(); 
 
    google.maps.event.trigger(map, "resize"); 
 
    map.setCenter(center); 
 
    }); 
 

 
    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
 
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
 
    this.setZoom(14); 
 
    google.maps.event.removeListener(boundsListener); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMainMap); 
 

 
// Multiple Markers 
 
var markers = [ 
 
    ['Test, Test', 33.890396, 35.506160], 
 
    ['Test, Test', 33.880007, 35.514207], 
 
    ['Test, Test', 33.880007, 35.518207], 
 
    ['Berytech Al Mathaf, Beirut', 33.880307, 35.514507], 
 
    ['Berytech Al Mathaf, Beirut', 33.880407, 35.516607] 
 
]; 
 

 
// Info Window Content 
 
var infoWindowContent = [ 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 0</h3>' + 
 
    '<p>Test</p>' + '</div>' 
 
    ], 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 1</h3>' + 
 
    '<p>Test</p>' + 
 
    '</div>' 
 
    ], 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 2</h3>' + 
 
    '<p>Test</p>' + 
 
    '</div>' 
 
    ], 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 3</h3>' + 
 
    '<p>Test</p>' + 
 
    '</div>' 
 
    ], 
 
    ['<div class="info_content">' + 
 
    '<h3>Test 4</h3>' + 
 
    '<p>Test</p>' + 
 
    '</div>' 
 
    ] 
 
]; 
 

 
// Display multiple markers on a map

html, 
 
body, 
 
#main-map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> 
 

 
<div id="main-map"></div>