我对 Google Maps API 很陌生,必须使用它来定位一些地址。我想知道如何使用写在文本字段中的地址来定位 Google Maps 标记。我一直在阅读谷歌的文档,但它并没有太大帮助。到目前为止,我已经设法使标记移动并根据标记移动的结束更新纬度和经度 values。
在 html 我有这个:
<!-- Address input -->
<div class="col-md-3">
<div class="form-group">
<label for="example-text-input" class="form-control-label">Address</label>
<input class="form-control" type="text" name="address" id="address">
</div>
</div>
<!-- shows the current latitude -->
<div class="col-md-3">
<div class="form-group">
<label for="example-text-input" class="form-control-label">Lat</label>
<input class="form-control" type="text" name="latitude" id="lat">
</div>
</div>
<!-- shows the current longitude -->
<div class="col-md-3">
<div class="form-group">
<label for="example-text-input" class="form-control-label">Lng</label>
<input class="form-control" type="text" name="longitude" id="lng">
</div>
</div>
<!-- show the map -->
<div class="row">
<div class="col">
<div class="card border-0">
<div id="map-default" class="map-canvas" style="height: 600px;"></div>
</div>
</div>
</div>
在js上我有这个:
var $map = $('#map-default'),
map,
lat,
lng,
color = "#5e72e4";
function initMap() {
map = document.getElementById('map-default');
map = new google.maps.Map(document.getElementById('map-default'), {
zoom: 12,
scrollwheel: true,
center: new google.maps.LatLng(40.71427 , -74.00597),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(4.60971, -74.08175),
map: map,
animation: google.maps.Animation.DROP,
// title: 'Marcador',
draggable: true
});
var infowindow = new google.maps.InfoWindow({
content: String(marker.getPosition())
});
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'dragend', function(evt){
$("#lat").val(evt.latLng.lat().toFixed(6));
$("#lng").val(evt.latLng.lng().toFixed(6));
map.panTo(evt.latLng);
});
map.setCenter(marker.position);
marker.setMap(map);
}
if($map.length) {
google.maps.event.addDomListener(window, 'load', initMap);
}
回答1
要找到标记的地址(无论是基于点击事件、拖动事件还是静态 lat/lng),您需要使用 https://developers.google.com/maps/documentation/geocoding/overview - 但请注意,这有配额限制并有助于 maps 使用统计! https://developers.google.com/maps/documentation/geocoding/start#auth
该过程称为 reverse geocoding
- 地理编码器提供了 lat/lng value 并将返回一个 JSON 响应,其中包含所选位置的详细信息,您可以从中提取地址。
基于您的原始代码,但没有任何 jQuery
<script>
function initMap(){
const map = new google.maps.Map(document.getElementById('map-default'), {
zoom: 12,
scrollwheel: true,
center: new google.maps.LatLng( 40.71427 , -74.00597 ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
// initialise the GeoCoder
const geocoder = new google.maps.Geocoder();
const infowindow = new google.maps.InfoWindow();
// utility to populate the input elements with discovered values
const populate=( lat, lng, addr )=>{
document.querySelector('input[name="address"]').value=addr;
document.querySelector('input[name="latitude"]').value=lat.toFixed(6);
document.querySelector('input[name="longitude"]').value=lng.toFixed(6);
};
// function to invoke the geocoder and find the address from given latlng
const findlocation=(e)=>{
geocoder.geocode( { 'location':e.latLng }, ( results, status )=>{
return evtcallback( results, status, e.latLng);
});
};
// respond to clicks on the map
const mapclickhandler=function(e){
findlocation.call( this, e );
};
// respond to clicks on the marker
const markerclickhandler=function(e){
infowindow.open( map, this );
infowindow.setContent( e.latLng.lat()+', '+e.latLng.lng() );
if( this.hasOwnProperty('address') )infowindow.setContent( this.address );
};
// respond to drag events of the marker.
const draghandler=function(e){
findlocation.call( this, e );
map.panTo( e.latLng );
};
// callback function that analyses the Geocoder response
const evtcallback=function( results, status ){
let _address, _location;
if( status == google.maps.GeocoderStatus.OK ){
_address=results[0].formatted_address;
_location=results[0].geometry.location;
// set custom properties for the marker
// which are used to populate infowindow
marker.address=_address;
marker.location=_location;
// populate the HTML form elements
populate( _location.lat(), _location.lng(), _address );
// open and set content for the infowindow
infowindow.open( map, marker );
infowindow.setContent( _address );
latlng=new google.maps.LatLng( _location.lat(), _location.lng() );
marker.setPosition( latlng );
map.setCenter( latlng );
map.setZoom( 15 );
return true;
}
console.warn( status );
};
let marker = new google.maps.Marker({
position: new google.maps.LatLng( 4.60971, -74.08175 ),
map: map,
animation: google.maps.Animation.DROP,
draggable: true
});
google.maps.event.addListener( map,'click', mapclickhandler );
google.maps.event.addListener( marker, 'click', markerclickhandler );
google.maps.event.addListener( marker, 'dragend', draghandler );
map.setCenter( marker.position );
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>