我正在研究EXAMPLE。最初我能够在标记拖动时获得纬度和经度但是在搜索框中搜索新结果带有新位置标记时我无法获得经度和纬度标记
以下是我的代码....
$(function () {
var lat = 44.88623409320778,
lng = -87.86480712897173,
latlng = new google.maps.LatLng(lat, lng);
//zoomControl: true,
//zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_left
}
},
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
marker = new google.maps.Marker({
draggable: true,
position: latlng,
map: map,
});
// var input = document.getElementById('searchTextField');
// var autocomplete = new google.maps.places.Autocomplete(input, {
// types: ["geocode"]
// });
// autocomplete.bindTo('bounds', map);
// var infowindow = new google.maps.InfoWindow();
// google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
// infowindow.close();
// var place = autocomplete.getPlace();
// if (place.geometry.viewport) {
// map.fitBounds(place.geometry.viewport);
// } else {
// map.setCenter(place.geometry.location);
// map.setZoom(17);
// }
// moveMarker(place.name, place.geometry.location);
// $('.MapLat').val(place.geometry.location.lat());
// $('.MapLon').val(place.geometry.location.lng());
// });
// google.maps.event.addListener(marker, 'dragend', function (event) {
// $('.MapLat').val(event.latLng.lat());
// $('.MapLon').val(event.latLng.lng());
// document.getElementById("lat").value = event.latLng.lat();
// document.getElementById("long").value = event.latLng.lng();
// infowindow.close();
// var geocoder = new google.maps.Geocoder();
// geocoder.geocode({
// "latLng":event.latLng
// }, function (results, status) {
// console.log(results, status);
// if (status == google.maps.GeocoderStatus.OK) {
// console.log(results);
// var lat = results[0].geometry.location.lat(),
// lng = results[0].geometry.location.lng(),
// placeName = results[0].address_components[0].long_name,
// latlng = new google.maps.LatLng(lat, lng);
// moveMarker(placeName, latlng);
// $("#searchTextField").val(results[0].formatted_address);
// }
// });
// });
// *****************************
var markers = [];
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */ (input));
google.maps.event.addListener(searchBox, 'places_changed', function () {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
draggable:true,
title: place.name,
position: latlng,
});
markers.push(marker);
bounds.extend(place.geometry.location);
marker = new google.maps.Marker({
draggable: true,
position: place.geometry.location,
map: map,
});
}
map.fitBounds(bounds);
});
var autocomplete = new google.maps.places.SearchBox(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
infowindow.close();
var place = searchBox.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(marker, 'dragend', function (event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();
infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng":event.latLng
}, function (results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("#pac-input").val(results[0].formatted_address);
}
});
});
// ****************************
function moveMarker(placeName, latlng) {
console.log(latlng);
marker.setPosition(latlng);
infowindow.setContent(placeName);
//infowindow.open(map, marker);
}
});#map-canvas {
height:400px;
width:600px;
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px;
/* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&sensor=true"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<br>
latitude:<input name="latitude" class="MapLat" value="" type="text" placeholder="Latitude" style="width: 161px;" disabled>
longitude:<input name="longitude" class="MapLon" value="" type="text" placeholder="Longitude" style="width: 161px;" disabled>
<div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div>