如何在谷歌地圖做標記管理

Question

我有大量的標記顯示在谷歌地圖。所以我想做一個聚類。我想第一次加載特定數量的標記，當邊界將被改變時，新的新標記應該顯示並且舊的應該被刪除。下面是我使用的代碼：一旦我們改變裝訂和老會被刪除

var addressArray = new Array("41 Green Ln, Handsworth, Birmingham, West Midlands B21")   
    var geocoder = new google.maps.Geocoder(); 
    for (var i = 0; i < addressArray.length; i++) { 
     geocoder.geocode({ 'address': addressArray[i]}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      } 
     }); 
    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
}); 

會有什麼代碼來加載標記特定約束和新的標誌將被載入。我認爲我們需要做一個阿賈克斯調用，以獲取新的標記從數據庫根據新的約束

Answer 1

這裏是一個例子。我認爲這是一般的想法。我認爲你想要mySQL/PHP。 我使用由Google託管的markerclusterer.js。 您將不得不更改數據庫連接值。

<?php 
if(isset($_GET['ajax'])) { 
    // for ajax call. Returns markers within the bounds 
    $north = $_GET['north']; 
    $south = $_GET['south']; 
    $west = $_GET['west']; 
    $east = $_GET['east']; 
    // You can see the bounds as just a rectangle, just give the max ans min values 
    $sql = " 
    SELECT id, name, latitude, longitude 
    FROM city 
    WHERE 
    latitude <= $north AND latitude >= $south AND 
    longitude <= $east AND longitude >= $west 
    "; 
    // I have a list of Belgian cities. 
    $db = mysql_connect('localhost', 'root', ''); // Use your own connection values 
    mysql_select_db('stackoverflow'); 
    $res = mysql_query($sql); 
    $array = array(); 
    while ($row = mysql_fetch_assoc($res)) { 
    $array[] = $row; 
    } 
    echo json_encode($array); 
    exit; 
} 
?> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script> 
<script> 
function initialize() { 
    var timer; 
    var markers = []; 
    var center = new google.maps.LatLng(50.5, 4.5); 
    var options = { 
    'zoom': 9, 
    'center': center, 
    'mapTypeId': google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), options); 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
    // we will trigger getMarkers(), but with a small delay. 
    // Only after the client stops panning/zooming for 1 second (feel free to change this value), we really trigger getMarkers. 
    // this is a trick to do this 
    clearTimeout(timer); 
    timer = setTimeout(getMarkers, 1000); 
    }); 
    // triggered by bounds_changed 
    function getMarkers() { 
    $.ajax({ 
     url: '?ajax=1', 
     data: boundsRectangle(map.getBounds()), 
     dataType: 'json', 
     success: function(data) { 
     // first clear the markers 
     clearMarkers(); 
     // @see https://googlemaps.github.io/js-marker-clusterer/docs/examples.html 
     for (var i = 0; i < data.length; i++) { 
      var latLng = new google.maps.LatLng(data[i].latitude, data[i].longitude); 
      var marker = new google.maps.Marker({ 
      position: latLng, 
      title: data[i].name, 
      map: map 
      }); 
      markers.push(marker); 
     } 
     var markerCluster = new MarkerClusterer(map, markers); 
     } 
    }); 
    } 
    function clearMarkers() { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); 
    } 
    markers = []; 
    } 
} 

// returns the min and max values of the boundsaries, so you get a box that contains at least the map boundaries 
// (notice: a projection of a rectangle looks less and less like a rectangle the gigger the bounds are) 
//(I would not be surprised if there is a more elegant way to do this) 
function boundsRectangle(bounds) { 
    return { 
    north: Math.max(bounds.Ea.j, bounds.Ea.k), 
    south: Math.min(bounds.Ea.j, bounds.Ea.k), 
    east: Math.max(bounds.va.j, bounds.va.k), 
    west: Math.min(bounds.va.j, bounds.va.k) 
    }; 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style> 
#map-canvas { 
    width: 500px; 
    height: 400px; 
} 
</style> 
<div id="map-canvas"></div> 

數據樣本;這些是比利時的城市/市鎮

CREATE TABLE IF NOT EXISTS city (
    id bigint(15) NOT NULL, 
    longitude decimal(12,10) DEFAULT NULL, 
    latitude decimal(12,10) DEFAULT NULL, 
    name varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, 
    PRIMARY KEY (id) 
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci; 
INSERT INTO city (id, name, longitude, latitude) VALUES 
(14275, 'brussel', 4.3515499000, 50.8427501000), 
(14279, 'schaarbeek', 4.3796600000, 50.8625502000), 
(14280, 'etterbeek', 4.3969658000, 50.8332318000), 
(14281, 'elsene', 4.3766927000, 50.8235717000), 
(14282, 'sint-gillis', 4.3464309000, 50.8299126000), 
(14283, 'anderlecht', 4.2986584000, 50.8238652000), 
(14284, 'sint-jans-molenbeek', 4.3193694000, 50.8569755000), 
(14285, 'koekelberg', 4.3250320000, 50.8632823000), 
(14286, 'sint-agatha-berchem', 4.2925975000, 50.8657821000), 
...