Question

我知道我对你的知识渊博的编码专家提出了一个愚蠢的问题，但我不是...... 我正在地图上获取搜索位置的纬度和经度（坐标）或拖动位置标记，但我没有成功。我认为你可以帮助我改进。我在这里搜索了很多例子，我得到了许多参考资料，但它不符合我的要求，因为它只搜索位置不深，直到特定地址，如我的小提琴所示。 FIDDLE

client.smembers('login',function(err,obj){
    if(obj.length === 0)
                    callback(obj);
    obj.forEachDone(function(reply,done){
        console.log(reply);
        client.hgetall(reply,function(err,value){
            value.login_value = decodeURI(value.login_value);
            done(value);
    });     
    },this,function(objArr){
            objArr.sort(utils.compare);
            console.log(objArr);
});
    });

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;
}

`

Answer 1

您可以在创建标记后添加以下代码，轻松更新现有的小提琴，以实现此目的：

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();
});

我已经分叉并更新了你的小提琴，以反映这一新增内容：

Updated Fiddle

添加最后一个位置标记后，附加代码会更新您的纬度和经度输入。

您需要记住，SearchBox class' getPlaces method可以返回多个条目（具有不同的位置），并且附加代码仅显示最后一个地方的纬度和经度。

在将任何添加的标记拖动到新位置后，附加代码还会添加marker dragend event handler来更新您的位置输入。

如何从谷歌地图获取经度和纬度？

1 个答案: