地理位置地图默认 [英] Geolocation map by default
本文介绍了地理位置地图默认的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个页面显示客户在地图上的位置，他可以使标记更加准确，并且GPS坐标也显示在页面顶部。
问题是，有时候，由于某种原因无法检测到位置，我如何设置默认位置以防万一实际位置没有出现。
让我们说我们要使默认位置是：25.074217,55.510044只在当前位置没有成功加载的情况下
这是代码
<！DOCTYPE html>
< html>
< head>
< / head>
< body>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< br />
复制此号码并将其放在GPS字段中
< br />
< br />
< input id =divLattype =text/>
< br />
< br />
< div id =map_canvasstyle =width：600px; height：600px;>< / div>
< script type =text / javascript>
var marker;
函数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（{
位置：城市，
地图：地图，
可拖曳：true，
图标：图片
}）;
google.maps。 event.addListener（marker，'position_changed'，function（event）{
update（）;
}）;
update（）;
}，function（positionError）{
alert（getCurrentPosition失败：+ positionError.message）;
}，{enableHighAccur acy：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>< /脚本>
< / body>
< / html>
解决方案
最简单的事情：将地图初始化为默认位置，然后让地理位置在启用时重置位置。
代码段：
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（）;}
html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
I have a page show customer location on map and he can drage the marker to be more accurate and the GPS coordinates displayed at the top of page as well.
the question is , in sometimes , the location can not be detected for some reason, how i can set default location just in case the actual location didn't appear.
let's say we want to make the default location is : 25.074217,55.510044 only in case of current location didn't loaded successfully
this is the code
<!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>
解决方案
Simplest thing to do: initialize the map to the default location, then let the geolocation reset the position if it is enabled.
code snippet:
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();
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<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>
这篇关于地理位置地图默认的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
