示例代碼,請測試。
markers.php
<?php
$p = [
['lat'=>-37.774785, 'lng'=> 145.137978],
['lat'=>-37.819616, 'lng'=> 144.968119],
['lat'=>-38.330766, 'lng'=> 144.695692],
['lat'=>-39.927193, 'lng'=> 175.053218],
['lat'=>-41.330162, 'lng'=> 174.865694],
['lat'=>-42.734358, 'lng'=> 147.439506],
['lat'=>-42.734358, 'lng'=> 147.501315],
];
echo json_encode($p);
markers.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var arr = JSON.parse(xhr.responseText);
if(Array.isArray(arr)){
locations = arr;
}
}
}
xhr.open('GET', 'markers.php', true);
xhr.send();
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkUrEm_U0QWg1QNryI1O5FpB0xAvffJ7I&callback=initMap"></script>
</body>
</html>
兩個方法:
markers.php
<?php
$p = [
['lat'=>-37.774785, 'lng'=> 145.137978],
['lat'=>-37.819616, 'lng'=> 144.968119],
['lat'=>-38.330766, 'lng'=> 144.695692],
['lat'=>-39.927193, 'lng'=> 175.053218],
['lat'=>-41.330162, 'lng'=> 174.865694],
['lat'=>-42.734358, 'lng'=> 147.439506],
['lat'=>-42.734358, 'lng'=> 147.501315],
];
return json_encode($p);
markers_html.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = <?=include("markers.php");?>;
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkUrEm_U0QWg1QNryI1O5FpB0xAvffJ7I&callback=initMap"></script>
</body>
</html>
爲什麼你需要一個數組?只需傳遞一個具有兩個值的字符串即可。 – Stuart
如果錯誤發生是因爲您的錯誤響應不是JSON格式會怎麼樣?我指的是你迴應的地方'''查詢失敗\ n「' –
你可以console.log()xhr.responseText的內容並粘貼結果嗎? – Logar