Google 地图 - 在空白地图上单击创建标记

Question

我运行遇到空白地图和带有现有标记的地图的问题。

用户可以在地图上添加新标记或通过拖动或单击地图上的任意位置来移动现有标记。只要有marker就没问题

这是我的代码示例，其中包含两张地图。一个没有记号笔，一个有记号笔。

<script>
  function initMap() {
    var myLatLng_1 = {lat: 20.782, lng: 10.177};
    var myLatLng_2 = {lat: 50.864, lng: 20.996};

    var myOptions_1 = {zoom: 6, center: myLatLng_1, draggableCursor: 'crosshair'};
    var myOptions_2 = {zoom: 6, center: myLatLng_2, draggableCursor: 'crosshair'};

    var myMap_1 = new google.maps.Map(document.getElementById('myMap_1'), myOptions_1);
    var myMap_2 = new google.maps.Map(document.getElementById('myMap_2'), myOptions_2);

    var myMarker_2 = new google.maps.Marker({position: myLatLng_2, map: myMap_2, draggable: true});

    google.maps.event.addListener(myMarker_2, 'dragend', function() {
      myMap_2.panTo(myMarker_2.getPosition());
    });

    google.maps.event.addListener(myMap_1, 'click', function(e) {
      myMarker_1.setPosition(e.latLng);
      myMap_1.panTo(myMarker_1.getPosition());
    });

    google.maps.event.addListener(myMap_2, 'click', function(e) {
      myMarker_2.setPosition(e.latLng);
      myMap_2.panTo(myMarker_2.getPosition());
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APlkSyA9oDVEF5v74FiMMk-9VOnlRrgGO8z_Yayo&callback=initMap"></script>

我该如何修改我的 "click" addListener，以便在没有标记的情况下创建一个新标记，同时让我将现有标记设置到新位置？

Answer 1

一个选项是检查变量是否已定义，如果是，则设置位置，否则，创建标记，然后设置其位置。

google.maps.event.addListener(myMap_1, 'click', function(e) {
  if (!myMarker_1)
    myMarker_1 = new google.maps.Marker({
      map: myMap_1,
      draggable: true
    });
  myMarker_1.setPosition(e.latLng);
  myMap_1.panTo(myMarker_1.getPosition());
});
google.maps.event.addListener(myMap_2, 'click', function(e) {
  if (!myMarker_2)
    myMarker_2 = new google.maps.Marker({
      map: myMap_2,
      draggable: true
    });
  myMarker_2.setPosition(e.latLng);
  myMap_2.panTo(myMarker_2.getPosition());
});

proof of concept fiddle

代码片段：

function initMap() {
  var myMarker_1;
  var myLatLng_1 = {
    lat: 20.782,
    lng: 10.177
  };
  var myLatLng_2 = {
    lat: 50.864,
    lng: 20.996
  };

  var myOptions_1 = {
    zoom: 6,
    center: myLatLng_1,
    draggableCursor: 'crosshair'
  };
  var myOptions_2 = {
    zoom: 6,
    center: myLatLng_2,
    draggableCursor: 'crosshair'
  };

  var myMap_1 = new google.maps.Map(document.getElementById('myMap_1'), myOptions_1);
  var myMap_2 = new google.maps.Map(document.getElementById('myMap_2'), myOptions_2);

  var myMarker_2 = new google.maps.Marker({
    position: myLatLng_2,
    map: myMap_2,
    draggable: true
  });

  google.maps.event.addListener(myMarker_2, 'dragend', function() {
    myMap_2.panTo(myMarker_2.getPosition());
  });

  google.maps.event.addListener(myMap_1, 'click', function(e) {
    if (!myMarker_1)
      myMarker_1 = new google.maps.Marker({
        map: myMap_1,
        draggable: true
      });
    myMarker_1.setPosition(e.latLng);
    myMap_1.panTo(myMarker_1.getPosition());
  });

  google.maps.event.addListener(myMap_2, 'click', function(e) {
    if (!myMarker_2)
      myMarker_2 = new google.maps.Marker({
        map: myMap_2,
        draggable: true
      });
    myMarker_2.setPosition(e.latLng);
    myMap_2.panTo(myMarker_2.getPosition());
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#myMap_2 {
  height: 100%;
  width: 50%;
  padding: 0px;
  margin: 0px;
  float: right;
}

#myMap_1 {
  height: 100%;
  width: 50%;
  padding: 0px;
  margin: 0px;
  float: right;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id='myMap_1'></div>
<div id='myMap_2'></div>

Google 地图 - 在空白地图上单击创建标记

Google Maps - Create marker on click on blank map

javascript

google-maps

marker