时间戳

首页 > 解决方案 > 如何在谷歌地图上绘制多个标记？

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

问题描述

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

我正在按照以下帖子实现此功能，但它不起作用，我不知道为什么。 Google Maps JS API v3 - 简单的多标记示例

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

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);
       })
     };
    }
  });

标签： javascriptjqueryhtml

解决方案

您的代码很接近，但您的位置变量不包含您认为的数据。您需要将数字（浮点）值传递给 lat/long 参数。

尝试类似的东西；

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);
            })
        }
    }
});

推荐阅读