如何從Google地方地圖中獲取經度和緯度？

Question

我知道我在問您一個知識淵博的編碼專家類型的愚蠢問題，但我不是...我正在研究地圖以獲取搜索位置的經緯度（坐標）或通過拖動位置標記，但是我沒有成功。 我想您可以幫助我改進。我在這里搜索了很多示例，但得到了很多參考，但這並不是按照我的要求，因為它只搜索直到我的小提琴中所示的特定地址才深入的位置。 小提琴

 function initialize() { var markers = []; var map = new google.maps.Map(document.getElementById('map-canvas'), { mapTypeId: google.maps.MapTypeId.ROADMAP }); var defaultBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631)); map.fitBounds(defaultBounds); // Create the search box and link it to the UI element. var input = /** @type {HTMLInputElement} */ ( document.getElementById('pac-input')); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); var searchBox = new google.maps.places.SearchBox( /** @type {HTMLInputElement} */ (input)); // Listen for the event fired when the user selects an item from the // pick list. Retrieve the matching places for that item. 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: place.geometry.location }); markers.push(marker); bounds.extend(place.geometry.location); } map.fitBounds(bounds); }); } initialize(); 

 #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> <div id="map-canvas"></div> <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 

`

Answer 1

您可以通過在創建標記后添加以下代碼來輕松更新現有的Fiddle，以實現此目的：

var latInput = document.getElementsByName('latitude')[0];
var lngInput = document.getElementsByName('longitude')[0];
latInput.value = place.geometry.location.lat()
lngInput.value = place.geometry.location.lng();
google.maps.event.addListener(marker, 'dragend', function (e) {
    latInput.value = e.latLng.lat();
    lngInput.value = e.latLng.lng();
});

我已經分叉並更新了您的小提琴以反映此添加：

更新小提琴

附加代碼在添加了最后一個位置標記后會更新您的緯度和經度輸入。

您需要記住， SearchBox類的getPlaces方法可以返回多個條目（具有不同的位置），並且附加代碼僅顯示最后一個位置的緯度和經度。

附加代碼還添加了一個標記dragend事件處理程序，以在將所有添加的標記拖動到新位置后更新您的位置輸入。