来自 JSON 数据的 Google Maps Marker 未呈现标记答案

【问题标题】：Google Maps Marker from JSON data not rendering marker来自 JSON 数据的 Google Maps Marker 未呈现标记
【发布时间】：2018-02-01 12:12:58
【问题描述】：

所以我使用 .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"
  }
}

【问题讨论】：

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

【解决方案1】：

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

另一个问题是您在 JSON 数据中使用的经纬度无效 - from here:

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

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

【讨论】：

【解决方案2】：

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

您的 lat/lng 值正在被 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

【讨论】：

【解决方案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
            });
        }
    });
});

【讨论】：