地理定位后改变标记位置？

Question

我需要在从浏览器获取地理位置后更改标记位置。我猜这个问题是my_marker不在功能getLocation？地理位置之前的一切都完美无缺。有人可以帮帮忙吗？

<!-- Map -->
<div id="map" style="width: 100%; height: 400px;"></div>
<input type="hidden" id="location" value="42.6903741,23.3122929" />
<!-- Script -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap&language=en" async defer></script>
<script type="text/javascript">
    function initMap() {
        // Init location
        var my_location = $("#location").val().split(",");

        // Init position
        var my_position = new google.maps.LatLng(my_location[0], my_location[1]);

        // Init map
        var my_map = new google.maps.Map(document.getElementById("map"), {
            center: my_position,
            zoom: 17
        });

        // Init marker
        var my_marker = new google.maps.Marker({
            position: my_position,
            map: my_map,
            draggable: true,
            title: "Choose location..."
        });

        // Init listener
        google.maps.event.addListener(my_marker, "dragend", function(event) {
            $("#location").val(event.latLng.lat() + "," + event.latLng.lng());
        });

        // Init geolocation
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getLocation);
        }

        function getLocation(my_location) {
            var my_position = new google.maps.LatLng(my_location.coords.latitude, my_location.coords.longitude);

            my_marker.setPosition(my_position);

            $("#location").val(my_location.coords.latitude + "," + my_location.coords.longitude);
        }
    }
</script>

Answer 1

你是对的。要在地理定位处理中移动标记（当您知道当前位置时），您需要在地理定位回调函数的范围内使用它。在initMap函数中移动地理定位函数。

function initMap() {
  // Init location
  var my_location = $("#location").val().split(",");

  // Init position
  var my_position = new google.maps.LatLng(my_location[0], my_location[1]);

  // Init map
  var my_map = new google.maps.Map(document.getElementById("map"), {
    center: my_position,
    zoom: 17
  });

  // Init marker
  var my_marker = new google.maps.Marker({
    position: my_position,
    map: my_map,
    draggable: true,
    title: "Choose location..."
  });

  // Init listener
  google.maps.event.addListener(my_marker, "dragend", function(event) {
    $("#location").val(event.latLng.lat() + "," + event.latLng.lng());
  });

  // Init geolocation
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(getLocation);
  }

  function getLocation(my_location) {
    var my_position = new google.maps.LatLng(my_location.coords.latitude, my_location.coords.longitude);

    my_marker.setPosition(my_position);
    my_map.setCenter(my_position);

    $("#location").val(my_location.coords.latitude + "," + my_location.coords.longitude);
  }
} // end of initMap

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>
<!-- 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>
<!-- Map -->
<div id="map" style="width: 100%; height: 400px;"></div>
<input id="location" value="42.6903741,23.3122929" />
<!-- Script -->
<script type="text/javascript">
  var infoWindow;

  function initMap() {
    // Init location
    var my_location = $("#location").val().split(",");

    // Init position
    var my_position = new google.maps.LatLng(my_location[0], my_location[1]);

    // Init map
    var my_map = new google.maps.Map(document.getElementById("map"), {
      center: my_position,
      zoom: 17
    });

    // Init marker
    my_marker = new google.maps.Marker({
      position: my_position,
      map: my_map,
      draggable: true,
      title: "Choose location..."
    });

    // Init listener
    google.maps.event.addListener(my_marker, "dragend", function(event) {
      $("#location").val(event.latLng.lat() + "," + event.latLng.lng());
    });
    infoWindow = new google.maps.InfoWindow;
    // Init geolocation
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(getLocation,
        function() {
          handleLocationError(true, infoWindow, my_map.getCenter());
        });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, my_map.getCenter());
    };

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
      infoWindow.setPosition(pos);
      infoWindow.setContent(browserHasGeolocation ?
        'Error: The Geolocation service failed.' :
        'Error: Your browser doesn\'t support geolocation.');
      infoWindow.open(my_map);
    }

    function getLocation(my_location) {
      var my_position = new google.maps.LatLng(my_location.coords.latitude, my_location.coords.longitude);

      my_marker.setPosition(my_position);
      my_map.setCenter(my_position);

      $("#location").val(my_location.coords.latitude + "," + my_location.coords.longitude);
    }
  }
</script>