Question

我正在尝试在Google地图上绘制多个标记，需要一些帮助。我从ajax api调用返回的json数据中获取位置的经度和纬度。

我正在遵循以下文章来实现此功能，但是它不起作用，我不确定为什么。 Google Maps JS API v3 - Simple Multiple Marker Example

我认为我的问题之一是我的location变量没有填充数组，所以当我执行.length时，即使结果集中只有3个位置，它也会返回23之类的数字。

var locations = [];

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

$.ajax({
url: api/com...
success: function (result) {
   for (const row of result.payload) {
 locations = 'lat: ' + row.latitude + ', ' + 'lng: ' + 
row.longitude;
    }

 for (i = 0; i < locations.length; i++) {  
     console.log(locations.length);
    marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),
     map: map,
      data: {
       name: locations[i][0]
      }
   });
   marker.addListener('click', function() {
      if(!this.infoWindow) {
       this.infoWindow = new google.maps.InfoWindow({
         content: this.data.name
       });
      }
         this.infoWindow.open(map,this);
       })
     };
    }
  });

Answer 1

locations = 'lat: ' + row.latitude + ', ' + 'lng: ' + row.longitude;

不知道我在说什么，但是似乎您在这里用字符串替换了数组。也许您应该尝试：

locations.push({
    lat: row.latitude,
    lng: row.longitude,
});

然后我会得到这样的声音：


position: new google.maps.LatLng(locations[i].lat, locations[i].lng),

// Instead of position: new google.maps.LatLng(locations[i][1], locations[i][2]),

在这里，您如何期望获得这个名字？我没看到您将名称放在上面的位置：

data: {
       name: locations[i][0]
      }

Answer 2

您的代码已结束，但是您的location变量不包含您认为包含的数据。您需要将数字（浮点）值传递给经度/纬度参数。

尝试类似的东西

locations = [];
for (const row of result.payload) {
 locations.push({lat: row.latitude, lng: row.longitude});
    }

然后；

marker=  new google.maps.Marker({
    position: {lat: locations[i].lat, lng: locations[i].lng},
    map: map
});

带有标记数据的完整示例：

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

$.ajax({
    url: 'api/com...',
    success: function (result) {
        var locations = []; //need to initialise this array empty

        for (const row of result.payload) {
            locations.push({lat: row.latitude, lng: row.longitude, name: row.name}); //Data for name
        }

        for (var i = 0; i < locations.length; i++) {
            console.log(locations.length);
            var marker=  new google.maps.Marker({
                position: {lat: locations[i].lat, lng: locations[i].lng},
                map: map,
                data: {
                    name: locations[i].name //Set data here
                }
            });
            marker.addListener('click', function() {
                if(!this.infoWindow) {
                    this.infoWindow = new google.maps.InfoWindow({
                        content: this.data.name
                    });
                }
                this.infoWindow.open(map,this);
            })
        }
    }
});

如何在谷歌地图上绘制多个标记？

2 个答案: