我一直在努力让下面的代码工作。该代码的目的是能够在人员进行地理定位时对其进行地理定位,然后在放置标记时能够在拖动时获取标记的Lat和Lng。
目前地图显示正常,标记在正确的位置进行了地理定位。但是当你开始拖动它时,没有Lat和Lng传递给updateMarkerPosition。
我在Chrome控制台中遇到的错误是:*未捕获的TypeError:无法读取未定义的属性'_ e3 '
这是我正在使用的脚本,也显示了我在页面中包含的文件。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>
function initialize() {
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapCanvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
// Geolocation found
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position: pos,
title: 'Your Location',
map: map,
draggable: true
});
map.setCenter(pos);
}, function() {
// User has cancelled and not let the browser find them using geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
});
} else {
// Browser doesn't support Geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
}
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
updateMarkerPosition的代码。这刚刚更新了页面上显示Lat和Lng的两个表单元素:
function updateMarkerPosition(pos) {
$('#posLat').val(pos.lat());
$('#posLong').val(pos.lng());
}
答案 0 :(得分:3)
地理位置是异步的。在回调运行之前,不会定义标记。您需要在回调函数(创建标记的位置)中分配侦听器。
// Try HTML5 geolocation
if(navigator.geolocation) {
// Geolocation found
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position: pos,
title: 'Your Location',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
map.setCenter(pos);
}, function() {
// User has cancelled and not let the browser find them using geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
});
} else {
// Browser doesn't support Geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
}