地理定位：用纬度和经度填写表格。谷歌地图 API答案

【问题标题】：Geolocation: Filling forms with latitude and longitude. Google Maps API地理定位：用纬度和经度填写表格。谷歌地图 API
【发布时间】：2015-09-13 21:12:42
【问题描述】：

我一直在构建一个谷歌地图，用户可以在其中分享信息以及他们在表单中的当前位置。我想使用 Geolocation 功能自动填充表单中的 lat、lng 字段。我唯一不能做的就是最后一步。这是我的代码：

<script src="https://maps.googleapis.com/maps/api/js?V=3.exp&key=wootwootwootwoot"></script>

    <script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>

var map;

function initialize() {
var mapOptions = {
zoom: 12
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);

  var marker = new google.maps.Marker({
    map: map,
    position: pos,
    title: 'GPS'
  });

  map.setCenter(pos);
}, function() {
  handleNoGeolocation(true);
});
} else {

handleNoGeolocation(false);
}
}

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(19.043516, -98.198232),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);


google.maps.event.addListener(marker, 'GPS', function() {
                var lat = marker.getPosition().lat();
                var lng = marker.getPosition().lng();
                $('#lat').val(lat);
                $('#lng').val(lng);
            });

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>

    <input id="lat"/>
    <input id="lng"/>

</body>
</html>

【问题讨论】：

标签： javascript ajax forms google-maps-api-3 geolocation

【解决方案1】：

你可以试试这个代码：

navigator.geolocation.getCurrentPosition(function(position) {

  var pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);
  document.getElementById('lat').value = position.coords.latitude;
  document.getElementById('lng').value = position.coords.longitude;    
  var marker = new google.maps.Marker({
    map: map,
    position: pos,
    title: 'GPS'
  });

  map.setCenter(pos);
}, function() {
  handleNoGeolocation(true);
});

最好把你的javascript代码放在</body>标签之前

【讨论】：

是的，就是这样！谢谢

【解决方案2】：

您只有将表单中的值放在错误路径中的代码，而是将代码放在成功路径中（我不确定您期望标记上的“GPS”事件做什么）：

function initialize() {
    var mapOptions = {
        zoom: 12
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            $('#lat').val(position.coords.latitude);
            $('#lng').val(position.coords.longitude);            
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);

            var marker = new google.maps.Marker({
                map: map,
                position: pos,
                title: 'GPS'
            });

            map.setCenter(pos);

        }, function () {
            handleNoGeolocation(true);
        });
    } else {

        handleNoGeolocation(false);
    }
}

【讨论】：