如何使用 JSON 获取谷歌热图 LatLng?

Question

我想用Json文件
获取谷歌热图 LatLng

这是我的谷歌热图功能

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 37.782551, lng: -122.445368}
});
heatmap = new google.maps.visualization.HeatmapLayer({
data: getPoints(),
map: map
});
}

这是我的 LatLng 函数，我想改用 getPoints(( 函数 JSON 文件

function getPoints() {
return [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
new google.maps.LatLng(37.782919, -122.442815),
new google.maps.LatLng(37.782992, -122.442112),
}

Answer 1

假设您制作了一个名为points.json的文件，该文件看起来像这样，并且与网页的HTML位于同一目录中。

{
"points": [
[37.782551, -122.445368],
[37.782745, -122.444586],
[37.782842, -122.443688],
[37.782919, -122.442815],
[37.782992, -122.442112]
]
}

然后，您需要从 Web 服务器请求 JSON 文件。如果您可以使用最新的 Web 浏览器，则可以为此使用 fetch

：

function requestPoints() {
fetch('points.json')
.then(function(response) {
return response.json();
})
.then(initMap);
}

如果你不能使用最近的Web浏览器，那么你可以用jQuery.getJSON做类似的事情。

当对"points.json"的网络请求返回时，这将使用 JSON 调用 initMap。然后，您可以像这样使用 JSON：

function initMap(json) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 37.782551, lng: -122.445368}
});
var points = json.points;
var data = [];
var i;
for (i = 0; i < points.length; i++) {
data[i] = new google.maps.LatLng(points[i][0], points[i][1]);
}
var heatmap = new google.maps.visualization.HeatmapLayer({
data: data,
map: map
});
}

如果您遵循 Google 示例，则需要将脚本请求中的回调参数从callback=initMap更改为callback=requestPoints。