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

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

另一个问题：目前你无法不创建新的地图（当然，你总是可以创造再次调用initialize新地图再次地理编码/搜索，但这样会导致糟糕的表现，也将增加地图加载......这是有限的）。

从地理编码/搜索分开的地图创建的溶液（包地址场成形式中，当表单将提交地理编码/搜索将被调用）

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>