我在google地图中显示了大量标记。所以我想做一个聚类。我想第一次加载特定数量的标记,当更改边界时,应显示新的标记,并删除旧标记。下面是我正在使用的代码:
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获取新标记答案 0 :(得分:0)
这是一个例子。我认为这是一般的想法。我认为你想要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),
...