为什么无法从Google Maps Places API的标记获取坐标?

时间:2018-10-01 00:19:13

标签: javascript google-maps

当它移到另一个位置时,我想从google地图中的标记获取经度和纬度。

我已经搜索并找到了答案,但是我真的不知道我在做什么错。当您选择搜索结果地址时,我可以获取坐标,但是当标记将其拖放到新位置时,坐标不会改变...

    <script>

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 38.241997, lng: 21.736244},
      zoom: 13
    });
    var card = document.getElementById('pac-card');
    var input = document.getElementById('pac-input');
    var types = document.getElementById('type-selector');
    var strictBounds = document.getElementById('strict-bounds-selector');

    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);

    var autocomplete = new google.maps.places.Autocomplete(input);

    // Bind the map's bounds (viewport) property to the autocomplete object,
    // so that the autocomplete requests use the current map bounds for the
    // bounds option in the request.
    autocomplete.bindTo('bounds', map);

    // Set the data fields to return when the user selects a place.
    autocomplete.setFields(
        ['address_components', 'geometry', 'icon', 'name']);

    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
      map: map,
  draggable: true,
      anchorPoint: new google.maps.Point(0, -29)
    });

google.maps.event.addListener(marker, 'dragend', function() {
document.getElementById('Lat').value = marker.getPosition().lat();
    document.getElementById('Lng').value = marker.getPosition().lng();
});

    autocomplete.addListener('place_changed', function() {
      infowindow.close();
      marker.setVisible(true);
      var place = autocomplete.getPlace();
  document.getElementById('Lat').value = place.geometry.location.lat();
      document.getElementById('Lng').value = place.geometry.location.lng();

      if (!place.geometry) {
        window.alert("No details available for input: '" + place.name + "'");
        return;
      }

      // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
      }
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);


      var address = '';
      if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }

      infowindowContent.children['place-icon'].src = place.icon;
      infowindowContent.children['place-name'].textContent = place.name;
      infowindowContent.children['place-address'].textContent = address;
      infowindow.open(map, marker);
    });


    document.getElementById('use-strict-bounds')
        .addEventListener('click', function() {
          console.log('Checkbox clicked! New state=' + this.checked);
          autocomplete.setOptions({strictBounds: this.checked});
        });
  }



</script>

然后我以两种形式的输入(Lat和Lng)分配坐标,但是我没有发布该代码,因为我确信这没有问题。正如我通过place_changed告诉您的那样,它非常完美。只有使用标记拖放,才不会发生任何事情。谢谢。

1 个答案:

答案 0 :(得分:0)

使用此获取坐标

var item_lat = place.geometry.location.lat();
      var item_lng = place.geometry.location.lng();
      var getloc = place.name;

      alert("Lat "+item_lat+ "___Lng "+item_lng + " Location "+getloc);