gpt4 book ai didi

javascript - 如何使用 JSON 在谷歌地图中制作动态标记?

转载 作者:行者123 更新时间:2023-12-02 15:41:00 25 4
gpt4 key购买 nike

我正在尝试创建动态标记以从我的 json 文件加载信息。由于某种原因,json 数据永远不会加载。当我尝试加载一个标记时,即使没有 json 数据,它也能正常工作。我不明白错误是什么。在控制台中,它显示“TypeError:(中间值)。错误不是函数”。下面是代码。

html 脚本链接

<script src="https://maps.googleapis.com/maps/api/js?CLIENT ID HERE 
&v=3.21&callback=initMap"
async defer></script>

外部JS

var map;

function initMap() {
var myLatlng = {
lat: -25.363,
lng: 131.044
};
var centerZone = {
lat: 0,
lng: 0
};


map = new google.maps.Map(document.getElementById('map'), {
center: centerZone,
zoom: 3,
minZoom: 3
});


$.getJSON('data/data.json', function(data) {
$.each(data.markers, function(i, value) {

var myLatlng = new google.maps.LatLng(value.lat, value.lon);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: value.lon
});

});
}.error(function(words) {
alert(words);
}));


var secretMessages = ['This', 'is', 'the', 'secret', 'message'];

/*marker.addListener('click', function() {
map.setZoom(6);
map.setCenter(marker.getPosition());
attachSecretMessage(marker, secretMessages[0]);
});*/

function attachSecretMessage(marker, secretMessage) {
var infowindow = new google.maps.InfoWindow({
content: secretMessage
});

marker.addListener('click', function() {
infowindow.open(marker.get('map'), marker);
});
}


// google.maps.event.addDomListener(window, 'load', initMap);
}

json数据

{
"markers": [
{
"id": "1",
"name": "Mesoamerica",
"lat": "-25.363",
"lon": "131.044",
"zoomLevel": "6"
}
]
}

json 数据中将包含更多对象,这只是我想要的示例。

最佳答案

您需要等到 JSON 数据加载后再对其进行任何操作。我建议将所有依赖于 JSON 文件的内容放在 $.done() 函数中,如下所示:

$.getJSON('data/data.json').done(function(data){
//everything else
});

您的浏览器在等待 $.getJSON 函数返回数据时将继续执行其他代码行。这就是为什么你会收到“not a function”错误;你试图调用一个不存在的函数,而 JS 不知道如何处理它。如果将所有内容都放在 $.done() 中,则在成功检索 JSON 数据之前,这些行不会执行。

关于javascript - 如何使用 JSON 在谷歌地图中制作动态标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32591675/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com