javascript - 如何为谷歌地图标记设置新坐标？

Question

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

之后，当用户单击 map 时，我想显示一个标记并设置新坐标。 (删除标记之前)

But when I click on map I see I have two marker and old marker is not deleted.

How can I set new coordinate for first marker?

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

map :

    <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>

Note: I want just one marker in map.

Answer 1

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

在全局范围内声明标记(例如map和infoWindow)并且它可以工作。

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

proof of concept fiddle

代码片段:

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>