javascript - 如何获取地理位置并显示在 map 上

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)。

另一个问题:目前，如果不创建新 map ，您将无法再次进行地理编码/搜索(当然，您始终可以通过再次调用initialize来创建新 map ，但这会导致性能不佳，还会增加 map 负载……这是有限的)。

将 map 创建与地理编码/搜索分开的解决方案(将地址字段包装到表单中，提交表单时将调用地理编码/搜索)

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>