Google 地图 API returns GPS 坐标不正确

Question

我正在使用 Google 地图 API 来让客户更准确地确定他们的产品应该在地址不准确的城市交付到哪里。

我尝试了 here and here 的答案，但都没有解决问题。

我们在客户指定的位置放置一个可移动的图钉，然后在客户对其放置满意并点击“继续”后检索 GPS 坐标。

问题是检索到的坐标既不是与地址关联的原始坐标，也不是与所述图钉的最后位置关联的新坐标。

  function initMap() {

    var latitude = -8.111735;
    var longitude = -79.025550;

    if(localStorage.getItem('dm-latitude')){
      var latitude = localStorage.getItem('dm-latitude');
      var longitude = localStorage.getItem('dm-longitude');

      if(latitude!='' && longitude!=''){
        $('.dm-clone-btn').addClass('dm-none');
        $('.dm-oroginal-btn').removeClass('dm-none');
      }else{
        $('.dm-clone-btn').removeClass('dm-none');
        $('.dm-oroginal-btn').addClass('dm-none');
      }
    }


    $('#dm-latitude').val(latitude);
    $('#dm-longitude').val(longitude);


    var myLatLng = new google.maps.LatLng(latitude,longitude);

    var mapOptions = {
      zoom: 15,
      center: myLatLng
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var markers = [];
    var marker = new google.maps.Marker({
      position: myLatLng,
      draggable:true,
      title: latitude+', '+longitude
    });
    markers.push(marker);
    marker.setMap(map);

    google.maps.event.addListener(map,'click',function(event) {
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

      var marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable:true,
        title: event.latLng.lat()+', '+event.latLng.lng()
      });
      markers.push(marker);
      localStorage.setItem('dm-latitude',event.latLng.lat());
      localStorage.setItem('dm-longitude',event.latLng.lng());
      $('#dm-latitude').val(event.latLng.lat());
      $('#dm-longitude').val(event.latLng.lng());
      $('.dm-clone-btn').addClass('dm-none');
      $('.dm-oroginal-btn').removeClass('dm-none');

    });

    google.maps.event.addListener(marker, 'dragend', function(event) {
      markers.push(marker);
      localStorage.setItem('dm-latitude',event.latLng.lat());
      localStorage.setItem('dm-longitude',event.latLng.lng());
      $('#dm-latitude').val(event.latLng.lat());
      $('#dm-longitude').val(event.latLng.lng());
      $('.dm-clone-btn').addClass('dm-none');
      $('.dm-oroginal-btn').removeClass('dm-none');
    } );


    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

    // more details for that place.
    searchBox.addListener('places_changed', function() {
      console.log('search ma');
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }

      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };

        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          title: place.name,
          map: map,
          draggable:true,
          position: place.geometry.location
        }));
        console.log(place.geometry);
        localStorage.setItem('dm-latitude',place.geometry.viewport.Za.i);
        localStorage.setItem('dm-longitude',place.geometry.viewport.Ua.i);

        $('#dm-latitude').val(place.geometry.viewport.Za.i);
        $('#dm-longitude').val(place.geometry.viewport.Ua.i);
        $('.dm-clone-btn').addClass('dm-none');
        $('.dm-oroginal-btn').removeClass('dm-none');

        //              console.log(place.geometry.viewport);
        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });

Answer 1

您正在使用未记录的属性：place.geometry.viewport.Za.i 和 place.geometry.viewport.Ua.i。

不要那样做（那些属性名字可以而且确实会改变）。

我当然不希望视口的任何属性与某个地点的实际位置相关（它们可能是与该地点关联的边界框的东北角和西南角。

// more details for that place.
searchBox.addListener('places_changed', function() {
  console.log('search ma');
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      title: place.name,
      map: map,
      draggable:true,
      position: place.geometry.location
    }));
    console.log(place.geometry);
    localStorage.setItem('dm-latitude',place.geometry.location.lat());
    localStorage.setItem('dm-longitude',place.geometry.location.lng());

    $('#dm-latitude').val(place.geometry.location.lat());
    $('#dm-longitude').val(place.geometry.location.lng());
    $('.dm-clone-btn').addClass('dm-none');
    $('.dm-oroginal-btn').removeClass('dm-none');

    //              console.log(place.geometry.viewport);
    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

Google 地图 API returns GPS 坐标不正确

Google Map API returns incorrect GPS coordinates

javascript

google-maps

google-maps-api-3