我正在尝试从数据库中的位置显示标记并将它们聚类。我可以正常显示标记,但似乎无法弄清楚如何为群集创建纬度和经度数组。我从这样的外部php文件中获取数据-
function initMap() {
var map = new google.maps.Map(document.getElementById('grid-map'), {
var infoWindow = new google.maps.InfoWindow;
downloadUrl('myfile.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
// Returned marker data from php file //
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('title');
var city = markerElem.getAttribute('city');
// Lat and Long for each marker
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng'))
);
var marker;
var iconBase = 'mysite.com/img/';
marker = new google.maps.Marker({
map: map,
position: point,
title: name,
icon: iconBase + 'loc.png'
});
marker.addListener('click', function() {
map.setZoom(14);
map.setCenter(marker.getPosition());
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
return marker;
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
这里是集群呼叫-
// Add a marker cluster to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',zoomOnClick: false});
这是myfile.php中的循环
$sql = "SELECT * FROM `table`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$id = $row['id'];
$lat = $row['lat'];
$lng = $row['lng'];
$title =$row['post_title'];
$city = $row['post_city'];
$price = $row['post_price'];
echo "<marker id='".$id."' price='".$price."' title='".$title."' city='".$city."' lat='".$lat."' lng='".$lng."' type='X'/>";
}
}
我只是从文件中复制了相关代码,试图使其保持可读性,所以我可能缺少括号。基本上,我认为我需要为群集创建一个坐标数组,或者是否可以对已经显示的位置进行群集?
现有代码的最简单方法是在创建标记之前定义MarkerClusterer,然后在创建它们时将每个标记添加到其中。>
MarkerClusterer
: