向 Ajax 请求响应中生成的 Google Map 添加标记答案

【问题标题】：Adding markers to Google Map generated in Ajax request response向 Ajax 请求响应中生成的 Google Map 添加标记
【发布时间】：2018-07-03 03:49:18
【问题描述】：

我有一个谷歌地图，我想添加标记来表示会员地址的位置，但是我有一个不太明白的小问题。

如果我有以下情况：

var map = new google.maps.Map(document.getElementById('map'), {
                              center: {lat: -34.397, lng: 150.644},
                              zoom: 8
                            });

                        var marker = new google.maps.Marker({
                          position: {lat: 39.099, lng: -105.129},
                          map: map,
                          title: ''
                        });

以上成功创建地图并成功添加标记，所以我知道我在正确的轨道上。但是当我将脚本编辑为以下内容时：

var map = new google.maps.Map(document.getElementById('map'), {
                              center: {lat: -34.397, lng: 150.644},
                              zoom: 8
                            });

                        $.each(data[1].locations, function(i, item) {
                        var marker = new google.maps.Marker({
                          position: {lat: item.latitude, lng: item.longitude},
                          map: map,
                          title: ''
                        });
                        });

这一次，地图已创建，但没有显示任何标记（尽管上面确实正确响应了适当的坐标，但我在控制台中收到以下错误：InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

【问题讨论】：

console.log 项目，经纬度属性名可能不同

标签： jquery ajax google-maps

【解决方案1】：

确保仅在 ajax 请求完成后才添加标记。仅在 ajax 的成功部分添加标记。

例子：

$.ajax({
    url:    "ajaxmap.php",
    type : 'GET',
    dataType: 'json',
    success : function(data) {

  $.each(data[1].locations, function(i, item) {
                        var marker = new google.maps.Marker({
                          position: {lat: item.latitude, lng: item.longitude},
                          map: map,
                          title: ''
                        });

}

【讨论】：