谷歌地图 API 不显示图钉答案

【问题标题】：Google maps API not showing pins谷歌地图 API 不显示图钉
【发布时间】：2017-11-18 05:55:20
【问题描述】：

TLDR：

问题在于 var marker = new google.maps.Marker() 行。不知何故，这正在执行，并且引脚不可见、不正确或未显示。

背景：

我有一些 JS 使用 AJAX 从我当前位置拉出 25 个最近的企业。查询和 ajax 工作正常。地图中心正确，但没有显示任何图钉。

$.each() 循环运行，并且具有正确的数据。（console.log 显示名称、纬度和经度就好了）。

我的直觉告诉我，我遗漏了一些简单的东西，但我找不到。

这里有什么问题？

附言。这里的执行顺序是：

getCurrentPosition 向浏览器查询位置，并执行回调 geo_success()
geo_success() 接收坐标，并实例化地图。
一旦我们有了一个地图对象，我们 $.ajax() 服务器的 /locations/ 服务来获取一个 JSON 数组来显示企业。
我们循环遍历那些创建标记以添加到地图中

我有点怀疑我将地图回调 initMap() 留空，但我在开发人员的参考资料中找到了执行此操作的示例代码。所以，应该没问题。

代码如下：

// Footer JS

var wpid = navigator.geolocation.getCurrentPosition(geo_success, geo_error, geo_options);

var geo_options = {
    enableHighAccuracy: true, 
    maximumAge        : 30000, 
    timeout           : 27000
};

var latitude  = 0;
var longitude = 0;

function geo_success(position) {
    console.log(position.coords.latitude, position.coords.longitude);
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    console.log("Init map @ " + latitude + ", " + longitude);

    var myCenter = {lat: latitude, lng: longitude};

    var mapOptions = {
      zoom: 12,
      center: myCenter,
      mapTypeId: 'roadmap'
    };
    var map = new google.maps.Map(document.getElementById('map'),
        mapOptions);

    counter = 0;

    $.ajax({
        url:'/locations/',
        data: {
            latitude : latitude,
            longitude : longitude
        },
        dataType: 'json'
        }).done(function(data){
            $.each(data,function(i,item){
                console.log("Adding pin " + i + " for: " + item.label + " @ " + item.latitude + ", " + item.longitude);
                pin = new google.maps.LatLng(parseInt(item.latitude),parseInt(item.longitude));
                var marker = new google.maps.Marker({
                  position: pin,
                  map: map,
                  type:'info'
                });

            })
        });
}

function geo_error() {
    alert("Sorry, no position available.");
}

function initMap() {
}

【问题讨论】：

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

【解决方案1】：

我认为问题出在这一行，请使用 ParseFloat 而不是 ParseInt ！

替换此行

 pin = new google.maps.LatLng(parseInt(item.latitude),parseInt(item.longitude));

用这个

pin = new google.maps.LatLng(parseFloat(item.latitude),parseFloat(item.longitude));

【讨论】：