[英]How to make dynamic markers in google maps with jSON?
I am trying to create dynamic markers to load information from my json file. 我正在尝试创建动态标记以从json文件加载信息。 For some reason, the json data never loads.
由于某种原因,json数据永远不会加载。 When I try to load one marker, it works fine without the json data.
当我尝试加载一个标记时,没有json数据就可以正常工作。 I don't see what the error is.
我看不出错误是什么。 In the console, it says "TypeError: (intermediate value).error is not a function".
在控制台中,它说“ TypeError :(中间值)。错误不是函数”。 Here is the code below.
这是下面的代码。
html script link html脚本链接
<script src="https://maps.googleapis.com/maps/api/js?CLIENT ID HERE
&v=3.21&callback=initMap"
async defer></script>
External JS 外部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 data json资料
{
"markers": [
{
"id": "1",
"name": "Mesoamerica",
"lat": "-25.363",
"lon": "131.044",
"zoomLevel": "6"
}
]
}
The json data will have more objects inside, this is just a sample of how I want it. json数据内部将有更多对象,这只是我想要的一个示例。
You need to wait until the JSON data loads before doing anything with it. 您需要等到JSON数据加载后才能对其进行任何处理。 I suggest placing everything that relies on the JSON file in a $.done() function, like this:
我建议将所有依赖JSON文件的内容放在$ .done()函数中,如下所示:
$.getJSON('data/data.json').done(function(data){
//everything else
});
Your browser will continue with the other lines of code while it's waiting for the $.getJSON function to return the data. 在等待$ .getJSON函数返回数据时,浏览器将继续执行其他代码行。 That's why you're getting the "not a function" error;
这就是为什么您会收到“不是函数”错误的原因; you're trying to call a function on something that doesn't exist and JS doesn't know what to do with it.
您正在尝试在不存在的对象上调用函数,而JS不知道如何处理它。 If you place everything in $.done(), those lines won't execute until the JSON data has successfully been retrieved.
如果将所有内容都放在$ .done()中,则在成功检索JSON数据之前,这些行将不会执行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.