Question

我正在尝试使用Google Maps API服务，以允许我的网站访问者在一个框中输入他们的地址。一旦他/她选择了匹配的地址，我想获得有关所提供地址的latitude和longitude信息。

使用API documentation中的代码，我的网站上有一张地图和一个文本框。但是，一旦Google找到匹配的地址，我就需要获取所选地址的latitude和longitude信息。

这是初始化地图的功能

function initMap() {

    var mapElement = document.getElementById('map');

    var map = new google.maps.Map(mapElement, {
      center: {
        lat: -34.397, 
        lng: 150.644
      },
      zoom: 6
    });

    // 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);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map
    });

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

    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {

      var places = searchBox.getPlaces();

      console.log(places);
      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,
          //icon: icon,
          title: place.name,
          position: place.geometry.location
        }));

        //coords.latitude

        var latitude = place.geometry.location.lat();
        var longitude = place.geometry.location.lng();  

        console.log(latitude, longitude);

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

      });

      map.fitBounds(bounds);

    });


}

以下代码行给了我正在寻找的信息。但是，它似乎只显示了一次（可能是显示多个地址的信息）。如何才能将latitude和longitude信息仅设为一个地址？

   var latitude = place.geometry.location.lat();
   var longitude = place.geometry.location.lng();

我尝试添加一个点击监听器，我可以抓住这个舔事件的信息

    map.addListener("click", function (event) {
        var lat = event.latLng.lat();
        var lng = event.latLng.lng();

        console.log(lat, lng);
    });

然而，这给了我点击地图的latitude和longitude，而不是我在自动填充建议匹配地址后从文本框中选择的地址

Answer 1

我确定有一种更简单的方法，但我使用maps.google.com并右键单击我想要找到坐标的位置，然后选择这里有什么？ ，然后经度和纬度将出现在地图的底部。

Answer 2

使用Google的API，您只需发送一个AJAX请求，您就不需要在页面上找到地图来获取坐标。看看这个！

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY

var responseAsObject;
$("#div").load( "url", function( response, status, xhr ) {
responseAsObject = $.parseJSON(response);
});
var long = responseAsObject.results.geometry.location.lng;
var lat = responseAsObject.results.geometry.location.lat;

如何使用Google Maps API获取所选地点的“纬度和经度”？

2 个答案: