Google Maps HTML5 нажмите, чтобы получить lat, long

Я пытаюсь создать мобильный HTML5 webapp, в котором пользователь может щелкнуть по карте, чтобы получить lat/long от Google Maps. Есть ли пример кода? Я попробовал поиск по Google, но нашел только какой-то веб-сайт, который делает это, но не имеет примера с субекодом.

Это связано с тем, что я собираюсь использовать геолокацию HTML5, чтобы сначала отобразить текущее местоположение, но если оно неточно, то пользователи могут указать это сами.

Большое спасибо.

Ответы

Ответ 1

В приведенном ниже коде будет показано, как получить Long и Lat, когда пользователь нажимает на карту - Разрешить пользователю размещать маркер на карте google

google.maps.event.addListener(map, 'click', function( event ){
  alert( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() ); 
});

Ответ 2

Вы должны использовать аргумент события.

 google.maps.event.addListener(map, 'click', function(event) {
     marker = new google.maps.Marker({position: event.latLng, map: map});
     console.log(event.latLng);   // Get latlong info as object.
     console.log( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng()); // Get separate lat long.
 });

Ответ 3

Я хочу показать вам полный ответ:

это основная часть кода, событие основано на щелчке и получает Lat/Long с кликом и показывает его в alert()

google.maps.event.addListener(map, 'click', function (event) { alert (event.latLng.lat() + "," + event.latLng.lng()); });

<!DOCTYPE html>
<html>
<body>
<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

google.maps.event.addListener(map, 'click', function(event) {
alert(event.latLng.lat() + ", " + event.latLng.lng());
});

}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>

измените свой API-интерфейс

src= "https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"

поместите свой API-ключ между ключ = и и обратный вызов:

https://maps.googleapis.com/maps/api/js?key= @@@@@@@& callback = myMap