Fatal编程技术网
  • javascript/
  • Javascript 地理位置：用纬度和经度填写表格。谷歌地图开发技术

Javascript 地理位置：用纬度和经度填写表格。谷歌地图开发技术

javascript ajax forms google-maps-api-3 geolocation

Javascript 地理位置：用纬度和经度填写表格。谷歌地图开发技术,javascript,ajax,forms,google-maps-api-3,geolocation,Javascript,Ajax,Forms,Google Maps Api 3,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

我一直在构建一个谷歌地图，用户可以通过一个表单共享信息和当前位置。我想用地理定位功能自动填写表格中的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>


var映射；
函数初始化（）{
变量映射选项={
缩放：12
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.latitude，
位置坐标经度）；
var marker=new google.maps.marker({
地图：地图，
职位:pos,，
标题：“全球定位系统”
});
地图设置中心（pos）；
}，函数（）{
手持导航（真）；
});
}否则{
手动定位（假）；
}
}
函数handleNogeLocation（errorFlag）{
如果（错误标志）{
var content='错误：地理位置服务失败'；
}否则{
var content='错误：您的浏览器不支持地理位置'；
}
变量选项={
地图：地图，
位置：新google.maps.LatLng（19.043516，-98.198232），
内容：内容
};
var infowindow=new google.maps.infowindow（选项）；
地图设置中心（选项位置）；
google.maps.event.addListener（标记'GPS'，函数（）{
var lat=marker.getPosition（）.lat（）；
var lng=marker.getPosition（）.lng（）；
$（'lat'）.val（lat）；
$（'lng'）.val（lng）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
您只有将表单中的值放入错误路径的代码，而将代码放入成功路径（我不确定您对标记上的“GPS”事件的期望是什么）：

您可以尝试以下代码：

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代码放在
标记之前

是的，就是这样！谢谢 
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);
});