Javascript 如何在googlemap中进行标记管理

我有大量的标记要显示在谷歌地图上。所以我想做一个聚类。我想第一次加载一个特定数量的标记，当绑定将被更改时，新标记将显示，旧标记将被删除。下面是我正在使用的代码：

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);
    }
});

---

为特定绑定加载标记的代码是什么？一旦我们更改了绑定，新的标记将被加载，旧的标记将被删除。我认为我们需要执行一个ajax调用，根据新的界限从db中获取新的标记。我想这是总的想法。我想您需要mySQL/PHP。 我使用由谷歌托管的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>

---

你的问题包含答案。是的，您只会在给定的范围内创建标记，而不会一次又一次地查询数据库。在javascript中创建一个数据存储对象，该对象使用geocoder解析地址，并存储在对象/数组中，具体取决于从该对象/数组中查询标记的当前位置。

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),
...