来自JSON数据的Google Maps Marker无法呈现标记

时间:2017-08-23 19:05:54

标签: javascript json google-maps google-maps-api-3

所以我使用.json文件为我的Google地图脚本提供标记信息。出于某种原因,它不会渲染地图标记。

地图将呈现,我可以放置一个标记,如谷歌记录,但当我尝试转换我的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"
  }
}

3 个答案:

答案 0 :(得分:3)

部分问题在于您使用${attribute:toNumber():plus(10)}来解析浮点数,因此截断小数点后的所有内容。

另一个问题是,您在JSON数据中使用的lat-long无效 - from here

  

南纬度的有效纬度范围是-90和+90   和北半球分别。经度在-180范围内   和+180指定Prime Meridian西侧和东侧的坐标,   分别

所以,-93的纬度没有任何意义。

答案 1 :(得分:1)

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

parseInt正在修改您的lat / lng值。如果您使用“-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

答案 2 :(得分:0)

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

user1.followers.all()