在数组中设置多个谷歌地图坐标对象

Question

我想将点的经纬度存储在一个对象中，并将所有对象存储在一个数组中。但是我的数组中每个对象不止一次。

我的代码:

function initMap1() {
  var mapDiv = document.getElementById('frame1');
  map = new google.maps.Map(mapDiv,{
    center: {lat: 3.875083, lng: 11.516110},
    zoom: 14,
    disableDoubleClickZoom: true
  }); 
  var Data = [];
  google.maps.event.addListener(map,'dblclick',function(e){
    var Object = {};
    lat.val(e.latLng.lat());
    lng.val(e.latLng.lng());
    $('#btn_modal').click(function(){
      Object['lat'] = e.latLng.lat();
      Object['lng'] = e.latLng.lng();
      Object['icone'] = nat.val();
      var marker = new google.maps.Marker({
        position: {lat:e.latLng.lat(),lng:e.latLng.lng()},
        map: map,
        icon:'img/icones/'+(nat.val())+'.png',
        title: nat.val()
      });
    });
    Data.push(Object);
  });
}

Answer 1

如果你想在点击模态按钮时将对象推送到数据数组，那么你应该将推送调用移动到你正在创建的事件中。否则，每次双击map时，对象都会被推入数组。

代替

$('#btn_modal').click(function(){
            Object['lat'] = e.latLng.lat();
            Object['lng'] = e.latLng.lng();
            Object['icone'] = nat.val();
            var marker = new google.maps.Marker({
                position: {lat:e.latLng.lat(),lng:e.latLng.lng()},
                map: map,
                icon:'img/icones/'+(nat.val())+'.png',
                title: nat.val()
            });
        });
        Data.push(Object);

让它

$('#btn_modal').click(function(){
            Object['lat'] = e.latLng.lat();
            Object['lng'] = e.latLng.lng();
            Object['icone'] = nat.val();
            var marker = new google.maps.Marker({
                position: {lat:e.latLng.lat(),lng:e.latLng.lng()},
                map: map,
                icon:'img/icones/'+(nat.val())+'.png',
                title: nat.val()
            });
     ----> Data.push(Object);
        });