如何在谷歌地图中进行标记管理
How to do the marker management in google map
我有大量的标记要显示在谷歌地图中。 所以我想做一个聚类。我想第一次加载特定数量的标记,当边界更改时,应显示新的新标记,而应删除旧标记。以下是我正在使用的代码:
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 调用,根据新的边界从数据库获取新标记
下面是一个例子。 我认为这是一般的想法。 我猜你想要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),
...
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 在谷歌地图上获取事件的x,y坐标
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 谷歌地图API v3绘图管理器-地图不渲染
- 在绘图中更改“绘图模式”谷歌地图v3的管理器
- 由谷歌地图绘制的矩形 绘图管理器不会触发鼠标移动事件
- 如何在谷歌地图中进行标记管理
- 如何更改谷歌地图“图形管理器”工具栏工具提示
- 谷歌地图标记管理器
- 谷歌地图绘图管理器在引脚掉落后启动绘图
- 将信息框添加到使用谷歌地图中的绘图管理器绘制的多边形中
- 谷歌地图V3标记管理器
- on更改谷歌地图APIv3绘图管理器的事件
- 谷歌地图绘图管理器限制为1个多边形