如何为Google Maps标记设置新的坐标

Question

通过此代码，我可以通过当前位置数据将标记放在地图上。

之后，当用户单击地图时，我想显示标记并设置新的坐标。(在标记之前删除(

但是当我单击地图时，我看到我有两个标记，旧标记不是 删除。

如何为第一个标记设置新的坐标？

注意：如果我没有第一个标记，我应该通过单击创建第一个标记。(我这样做(

地图：

    <div id="map"></div>
            <script>
    var map, infoWindow;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 28.961856892883443,
            lng: 50.83683013916016
        },
        zoom: 15,
        gestureHandling: 'greedy',
    });
    infoWindow = new google.maps.InfoWindow;
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var location = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            marker = new google.maps.Marker({
                position: location,
                map: map
            });
            infoWindow.open(map);
            map.setCenter(location);

        }, function () {
            handleLocationError(true, infoWindow, map.getCenter());
        });
    } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
    }
}

function handleLocationError(browserHasGeolocation, infoWindow, location) {
    alert("Error");
    infoWindow.open(map);
}

// New marker by click on map
$(document).ready(function () {
    var marker;
    function placeMarker(location) {
        if (marker) {
            marker.setPosition(location);
        } else {
            marker = new google.maps.Marker({
                position: location,
                map: map
            });
        }
    }
    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });
});
</script>
<script async defer
src = "https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&language=fa&callback=initMap" >
</script>

注意：我只想在地图中的一个标记。

Answer 1

您的问题是jQuery .ready函数内的marker变量是该函数本地的(并且与initMap函数创建的全局范围中的marker不同(。

在全局范围中声明marker(例如map和infoWindow(，并且有效。

<div id="map"></div>
        <script>
var map, infoWindow;
var marker; // put marker in global scope (remove from .ready function)

概念证明小提琴

代码段：

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
<script>
  var map, infoWindow;
  var marker;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 28.961856892883443,
        lng: 50.83683013916016
      },
      zoom: 15,
      gestureHandling: 'greedy',
    });
    infoWindow = new google.maps.InfoWindow;
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var location = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        marker = new google.maps.Marker({
          position: location,
          map: map
        });
        infoWindow.open(map);
        map.setCenter(location);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }
  function handleLocationError(browserHasGeolocation, infoWindow, location) {
    alert("Error");
    infoWindow.open(map);
  }
  // New marker by click on map
  $(document).ready(function() {
    function placeMarker(location) {
      if (marker) {
        marker.setPosition(location);
      } else {
        marker = new google.maps.Marker({
          position: location,
          map: map
        });
      }
    }
    google.maps.event.addListener(map, 'click', function(event) {
      placeMarker(event.latLng);
    });
  });
</script>