如何从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事件处理程序，以在将所有添加的标记拖动到新位置后更新您的位置输入。