来自 JSON 数据的谷歌地图标记不呈现标记

Question

所以我使用一个.json文件来为我的谷歌地图脚本提供标记信息。 由于某种原因，它不会呈现地图标记。

地图将渲染，我可以按照谷歌记录的方式放置一个标记，但是当我尝试转换我的 JSON 数据来渲染标记时，它什么都不做。 也没有控制台错误。

您会注意到控制台日志，因为我一直在尝试解决这个问题，最终得到：

[0] Event Location: [object Object]

我没有为此正确创建对象吗？

jQuery(document).ready(function ($) {
$.getJSON('../wp-content/plugins/loopden/json/map.json', function (eventsData) {
// Grabbing our JSON file to mark the map.
Object.size = function(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
// Get the size of an object
var eventsSize = Object.size(eventsData);
console.log(eventsSize);
console.log(eventsData[0].lat);
for (var i = 0, l=eventsSize; i <l; i++){
var lat = eventsData[i].lat;
var lng = eventsData[i].lng;
var latlng = {"lat":parseInt(lat) , "lng":parseInt(lng)};
console.log('['+i+'] Event Location: '+latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: eventsData[i].title
});
}
});
});

这是我正在使用的 JSON 数据：

{
"0": {
"lat": "-93.2745179",
"lng": "44.9817854",
"title": "Super Cool Event",
"date": "2017-08-25",
"time": "8:00pm - 10:00am",
"cost": "$15",
"bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur, leo ac gravida vestibulum, nisi metus posuere nibh, malesuada faucibus erat eros nec metus. Morbi tincidunt iaculis eros quis fringilla.",
"featured": "off"
}
}

Answer 1

部分问题在于您使用parseInt来解析浮点数，因此小数点后的所有内容都被截断。

另一个问题是您在 JSON 数据中使用的经度无效 - 从这里开始：

以度为单位的有效纬度范围是 -90 和南部的 +90 和北半球。经度在 -180 范围内 和 +180 指定本初子午线以西和以东的坐标， 分别。

因此，纬度为-93没有任何意义。

Answer 2

我认为您的问题与parseInt有关。

您的纬度/液化值正在由 parseInt 修改。如果你有"-93.2745..."作为纬度，当你使用parseInt时，只会从中提取93。

parseInt(( 函数解析字符串参数并返回一个 指定基数的整数(数学数字的基数 系统(。

请尝试parseFloat：

for (var i = 0, l=eventsSize; i <l; i++) {
var lat = data[i].lat;
var lng = data[i].lng;
var latlng = {
lat: parseFloat(lat), 
lng: parseFloat(lng)
};
console.log('['+i+'] Event Location: ', latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: data[i].title
});
}

此外，您正在获取此日志[0] Event Location: [object Object]，因为您正在尝试"连接"对象。

如果要记录对象，只需将其用作console.log中的参数，例如：

console.log('['+i+'] Event Location: ', latlng);

希望这有帮助。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Answer 3

我能够使用新的google.maps.latlng修复此购买，而不是尝试将其放在标记之外

。

jQuery(document).ready(function ($) {
$.getJSON('../wp-content/plugins/loopden/json/map.json', function (eventsData) {
// Grabbing our JSON file to mark the map.
Object.size = function(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
// Get the size of an object
var eventsSize = Object.size(eventsData);
console.log(eventsSize);
console.log(eventsData[0].lat);
for (var i = 0, l=eventsSize; i <l; i++){
var lat = eventsData[i].lat;
var lng = eventsData[i].lng;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(lat), parseFloat(lng)),
map: map,
title: eventsData[i].title
});
}
});
});