如何获取地理位置并显示在地图上

Question

我一直在尝试从文本框中获取位置地址，然后从该地址获取经纬度，并显示距该地址最近的火车站。

我可以得到一个地址的经纬度我还可以显示距离特定纬度和经度最近的火车站。

我的问题是，当我尝试从地址中获取经纬度并将地址经纬度显示为最近的火车站时，我失败了。

请在下面找到我的代码（问题在警报中-）-

function initialize() {

        // start
        var latitude;
        var longitude;
        geocoder = new google.maps.Geocoder();
        var address = document.getElementById('address').value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                latitude = results[0].geometry.location.lat();
                longitude = results[0].geometry.location.lng();
                alert(longitude);

            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });

        alert(longitude);

        var pyrmont = new google.maps.LatLng(-37.8176108, 145.0422631);

        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: pyrmont,
            zoom: 15
        });

        var request = {
            location: pyrmont,
            radius: 1000,
            types: ['train_station', 'bus_station', 'subway_station',   'transit_station']
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);  

    }

Answer 1

问题是 geocoder.geocode 异步运行，您将无法在调用回调之前访问结果，因此您应该在回调中调用以下 (nearbySearch)。

另一个问题：目前你将无法在不创建新地图的情况下再次geocode/search（当然你总是可以通过再次调用initialize来创建新地图，但这会导致性能不佳，并且还会增加地图加载...这是有限的）。

将地图创建与 geocoding/search 分开的解决方案（将地址字段包装到表单中，提交表单时将调用 geocoding/search）

function initialize() {

  "use strict";
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(-37.8176108, 145.0422631),
      zoom: 1
    }),
    field = document.getElementById('address'),
    form = field.form,
    marker = new google.maps.Marker(),
    info = new google.maps.InfoWindow(),
    //I use this object later to hide previously added markers 
    mvc = new google.maps.MVCObject(),
    geocoder = new google.maps.Geocoder(),
    service = new google.maps.places.PlacesService(map);

  //use the field as control when you want to    
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(form);

  google.maps.event.addListener(marker, 'click', function() {
    google.maps.event.trigger(info, 'open', this);
  });

  //this will open the infowindow for a clicked marker
  //the infowindow-content will be retrieved from the 
  //content-property of the marker
  google.maps.event.addListener(info, 'open', function(marker) {
    this.setContent(marker.get('content'));
    this.open(marker.getMap(), marker);
  });

  marker.bindTo('map', mvc, 'map');

  //this separates the geocoding/places-search from the map-creation
  //it will be executed when the form will be submitted
  //(e.g. by hitting ENTER in the address-field) 
  google.maps.event.addDomListener(form, 'submit', function(e) {
    if (e) e.preventDefault();

    //this hides all markers and the infowindow
    mvc.set('map', null);

    if (field.value.match(/\S+/)) {
      geocoder.geocode({
        'address': field.value
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          mvc.set('map', map);
          if (results[0].geometry.viewport) {
            map.fitBounds(results[0].geometry.viewport);
          } else {
            map.setCenter(results[0].geometry.location);
          }

          marker.setValues({
            position: results[0].geometry.location,
            content: results[0].formatted_address
          });


          service.nearbySearch({
            location: results[0].geometry.location,
            radius: 1000,
            types: ['train_station', 'bus_station', 'subway_station', 'transit_station']
          }, function(places, status) {

            if (status == google.maps.places.PlacesServiceStatus.OK) {

              //will be used later to set the viewport
              //so that it contains all markers
              var b = new google.maps.LatLngBounds();

              places.forEach(function(place, i) {

                var m = new google.maps.Marker({
                  position: place.geometry.location,
                  icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
                  content: place.name
                });

                b.extend(place.geometry.location);
                m.bindTo('map', mvc, 'map');

                google.maps.event.addListener(m, 'map_changed', function() {
                  if (!this.getMap()) this.unbindAll();
                });

                google.maps.event.addListener(m, 'click', function() {
                  google.maps.event.trigger(info, 'open', this);
                });


              });

              if (places.length > 1) {
                map.fitBounds(b);
              }
            } else {
              alert('NearbySearch was not successful for the following reason: ' + status);
            }

          });
        } else {
          alert('Geocoding was not successful for the following reason: ' + status);
        }
      });
    }
    return false;
  });
  //trigger form-submit for the initial search 
  google.maps.event.trigger(form, 'submit');

}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}
#address {
  width: 300px;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&v=3">
</script>
<div id="map-canvas"></div>
<form>
  <input id="address" value="21 Elphin Grove, Hawthorn VIC 3122, Australia" placeholder="insert an address and hit ENTER" title="insert an address and hit ENTER"/>
</form>

如何获取地理位置并显示在地图上

How to get a geo location and show to the map

javascript

google-maps

google-maps-api-3

google-geocoder