如何从Google地方地图中获取经度和纬度？

debugcn 发表于 Dev

密斯泰勒·帕特尔

我知道我在问您一个知识渊博的编码专家类型的愚蠢问题，但是我不是...我正在研究地图以获取搜索位置的经纬度（坐标）或通过拖动位置标记，但是我没有获得成功。我想您可以帮助我进行改进。我在这里搜索了很多示例，但得到了很多参考，但这并不是我所需要的，因为它只搜索直到我的小提琴中所示的特定地址才深入的位置。小提琴

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">

克里斯·库克（Chris Cook）

您可以通过在创建标记后添加以下代码来轻松更新现有的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事件处理程序，以在将所有添加的标记拖动到新位置后更新您的位置输入。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。