我在地图上有一个页面显示客户位置,他可以将标记拖放到更准确的位置,并在页面顶部显示GPS坐标。
问题是,有时候,由于某种原因无法检测到位置,我如何设置默认位置以防万一实际位置没有出现。
让我们说我们想要默认位置是:25.074217,55.510044仅在当前位置没有成功加载
这是代码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<br />
Copy this number and past it in GPS field
<br />
<br />
<input id="divLat" type="text" />
<br />
<br />
<div id="map_canvas" style="width: 600px; height: 600px;"></div>
<script type="text/javascript">
var marker;
function initialize() {
var lat;
var lon;
navigator.geolocation.getCurrentPosition(function (location) {
lat = location.coords.latitude;
lon = location.coords.longitude;
var city = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: 15,
center: city,
mapTypeId:google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var image = "icon.png";
marker = new google.maps.Marker({
position: city,
map: map,
draggable: true,
icon: image
});
google.maps.event.addListener(marker, 'position_changed', function (event) {
update();
});
update();
}, function (positionError) {
alert("getCurrentPosition failed: " + positionError.message);
}, { enableHighAccuracy: true });
};
google.maps.event.addDomListener(window, "load", initialize);
function update() {
var lonlan = marker.getPosition();
var divLat = document.getElementById ("divLat");
divLat.value = lonlan.lat ()+","+lonlan.lng ();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfpx62iYkjhpz0J-vu4Zz96vtWE2TFzQs&signed_in=true&callback=initMap"></script>
</body>
</html>
答案 0 :(得分:0)
最简单的做法是:将地图初始化为默认位置,然后让地理位置重置位置(如果已启用)。
代码段
var marker;
var map;
var image = "http://maps.google.com/mapfiles/ms/micons/blue.png";
function initialize() {
var defaultLocation = new google.maps.LatLng(25.074217, 55.510044);
var lat;
var mapOptions = {
zoom: 15,
center: defaultLocation,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
marker = new google.maps.Marker({
position: defaultLocation,
map: map,
draggable: true,
icon: image
});
google.maps.event.addListener(marker, 'position_changed',
function(event) {
update();
});
navigator.geolocation.getCurrentPosition(function(location) {
lat = location.coords.latitude;
lon = location.coords.longitude;
var city = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: 15,
center: city,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
marker = new google.maps.Marker({
position: city,
map: map,
draggable: true,
icon: image
});
google.maps.event.addListener(marker, 'position_changed',
function(event) {
update();
});
update();
}, function(positionError) {
alert("getCurrentPosition failed: " + positionError.message);
}, {
enableHighAccuracy: true
});
}
google.maps.event.addDomListener(window, "load", initialize);
function update() {
var lonlan = marker.getPosition();
var divLat = document.getElementById("divLat");
divLat.value = lonlan.lat() + "," + lonlan.lng();
}
&#13;
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<br />Copy this number and past it in GPS field
<br />
<br />
<input id="divLat" type="text" />
<br />
<br />
<div id="map_canvas"></div>
&#13;