Изменить положение маркера после геолокации?

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

подтверждение концепции скрипки

фрагмент кода:

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>