Question

从浏览器获取地理位置后，我需要更改标记的位置。我猜测问题是sql: converting argument $1 type: unsupported type []model.Pet, a slice of struct在函数my_marker之外吗？地理位置定位之前的所有操作均正常运行。有人可以帮忙吗？

getLocation

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>

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

1 个答案: