javascript - 当我将标记移动到我所在的指定位置时,如何获取 map 中 placeMarker 的纬度和经度以及我的地址

标签 javascript jquery html google-maps google-maps-api-3

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);

var _map;
var _originMarker, _destinationMarker;
var _geocoder;

function initialize()
{
   var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(21.1289956,82.7791754)
    };
    _map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    _geocoder = new google.maps.Geocoder();
    _originMarker=createMarker('search-from');
    _destinationMarker=createMarker('search-to');


    google.maps.event.addListener(_map, 'click', function(mouseEvent)
    {
        if ((_activeMarker != null) && (!_activeMarker.getMap())) placeMarker(_activeMarker, mouseEvent.latLng);
    });
}





function createMarker(_autoComplId)
{
    var _autoCompl = document.getElementById(_autoComplId);
    var _newmarker = new google.maps.Marker({
        position: new google.maps.LatLng(0, 0),
        draggable: true,
        map: null,
        autoCompl: _autoCompl
    });

    google.maps.event.addListener(_newmarker, "dragend", function(event)
    {
        placeMarker(_newmarker, _newmarker.getPosition());
    });

    var _autocomplete = new google.maps.places.Autocomplete(_autoCompl);
    _autocomplete.setTypes(['geocode']);
    google.maps.event.addListener(_autocomplete, 'place_changed', function()
    {
        var _place = _autocomplete.getPlace();
        if (_place.geometry == null) return;
        setCenterAndZoom(_place.geometry.location, 16);
        placeMarker(_newmarker, _place.geometry.location);
    });

    return _newmarker;  
}

function placeMarker(_marker, _location)
{
    _marker.setPosition(_location);
    RenewAddress(_marker);
}

function RenewAddress(_marker)
{
    _geocoder.geocode({'latLng': _marker.getPosition()}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK)
        {
            if (_marker.getMap() == null) _marker.setMap(_map);
            _marker.autoCompl.value = results[0].formatted_address;
        }
    });
}


function setCenterAndZoom(_center, _zoom)
{
    _map.setCenter(_center);
    _map.setZoom(_zoom);
}

var _activeMarker = null;
function setActiveMarker(index)
{
    switch(index)
    {
        case 0:
            _activeMarker = _originMarker;
            break;
        case 1:
            _activeMarker = _destinationMarker;
    }
}

</script>
  • 这就是我用来检索地址的方法,
  • 现在我想检索纬度和经度以及我的 地址,在上述函数RenewAddress(_marker)

iam 使用 _geocoder.geocode({'latLng': _marker.getPosition()}, function(results, status)

  • 但我无法检索它,我刚刚得到了地址的结果 自动填写文本框作为输出,但我无法检索 纬度和经度

最佳答案

我的 RenewAddress() 函数版本几乎与您的相同,只是我之前检索了 lat/lng 值并在控制台中显示它们。

function RenewAddress(_marker) {
    console.log('RenewAddress');

    var latlng = _marker.getPosition();
    console.log(latlng.lat());
    console.log(latlng.lng());

    _geocoder.geocode({'latLng': _marker.getPosition()}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            console.log('status ok');
            if (_marker.getMap() == null) 
                _marker.setMap(_map);
            _marker.autoCompl.value = results[0].formatted_address;
            console.log(results[0].formatted_address);
            console.log(_marker.autoCompl.value);

            var exactAddress = document.getElementById('search-to');
            exactAddress.value = _marker.autoCompl.value + ', lat/lng: ' + latlng.lat() + ':' + latlng.lng();
        } else {
            console.log('error: ' + status);
        }
    });
}

参见example at jsbin只有一个标记以及纬度和经度字段。在town/city/country字段中写入一些内容,例如奥里萨邦。选择它。显示该标记后,应设置确切的地址以及纬度和经度字段。如果您移动标记,信息将会更改。

关于javascript - 当我将标记移动到我所在的指定位置时,如何获取 map 中 placeMarker 的纬度和经度以及我的地址,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21984402/

相关文章:

javascript - 如何在滚动位置上平移谷歌地图

javascript - 显示复选框中的多个数据

javascript - 检查数组中的项目是否存在于对象内部

jquery - 如何使用 JQuery 隐藏和显示 HTML 元素?

javascript - 如何使用 Enter 或 Escape 键将 INPUT 元素变为只读

jquery - 尝试向SRC添加宽度和高度属性

html - Font Awesome 堆叠图标大小

javascript - 为什么我的警告框不会出现在我的 Javascript/HTML 代码中?

javascript - 使用 AngularJS 修改加载的输入字段值

javascript - 如何在javascript中创建新行