下面是“基于JavaScript定位当前的地理位置”的完整攻略。
在开始定位当前的地理位置之前，需要完成以下几个前提准备：
获取用户的位置可以分为以下三个步骤：
创建Geolocation对象，该对象可以通过调用navigator.geolocation来进行创建。
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("Geolocation is not supported by this browser.");
}
监听位置变化，通过设置watchPosition函数，可以实现获取位置变化的实时更新。
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
console.log("Geolocation is not supported by this browser.");
}
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude +
"Longitude: " + position.coords.longitude);
}
最后一步就是将获取到的位置经纬度显示在HTML页面上。可以通过使用HTML DOM来实现。
<!DOCTYPE html>
<html>
<head>
<title>Show Location</title>
<meta charset="utf-8">
<script>
// HTML5的地理位置获取
if (navigator.geolocation) {
// 获取当前位置
navigator.geolocation.getCurrentPosition(showmap,errorHandler);
}
else {
alert("This browser does not support HTML5 geolocation");
}
function showmap(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
console.log(lat,lng)
// 将地图放在指定元素的中间
var map = new BMap.Map("map");
var point = new BMap.Point(lng, lat);
map.centerAndZoom(point, 15);
// 添加标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var label = new BMap.Label("你的所在位置",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
}
function errorHandler(error){
console.log(error.message);
}
</script>
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
</body>
</html>
下面列举两个实际的案例，分别介绍如何使用 JavaScript 定位当前的地理位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Show Location</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的AK"></script>
<script>
// HTML5的地理位置获取
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,errorHandler);
}
else {
alert("Geolocation is not supported by this browser.");
}
function showPosition(position) {
var x = position.coords.latitude;
var y = position.coords.longitude;
console.log(x,y)
// 创建百度地图实例，并设置中心点坐标和地图级别
var map = new BMap.Map("container");
var point = new BMap.Point(y, x);
map.centerAndZoom(point, 17);
// 添加标注以及标注内容
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var label = new BMap.Label("您的位置",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
}
function errorHandler(error) {
switch(error.code){
case error.PERMISSION_DENIED:
console.log("您拒绝了位置服务请求。");
break;
case error.POSITION_UNAVAILABLE:
console.log("位置获取失败。");
break;
case error.TIMEOUT:
console.log("位置请求超时。");
break;
case error.UNKNOWN_ERROR:
console.log("位置服务不可用。");
break;
}
}
</script>
</head>
<body>
<div id="container" style="width:100%;height:100%"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Show Location</title>
<script src="https://maps.googleapis.com/maps/api/js?key=您的APIKey"></script>
<script>
// HTML5的地理位置获取
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, errorHandler);
}
else {
alert("Geolocation is not supported by this browser.");
}
function showPosition(position) {
var x = position.coords.latitude;
var y = position.coords.longitude;
console.log(x,y)
// 创建谷歌地图实例，并设置中心点坐标和地图级别
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: x, lng: y},
zoom: 15
});
// 添加标注以及标注内容
var marker = new google.maps.Marker({
position: {lat: x, lng: y},
map: map,
title: '您的位置'
});
}
function errorHandler(error) {
switch(error.code){
case error.PERMISSION_DENIED:
console.log("您拒绝了位置服务请求。");
break;
case error.POSITION_UNAVAILABLE:
console.log("位置获取失败。");
break;
case error.TIMEOUT:
console.log("位置请求超时。");
break;
case error.UNKNOWN_ERROR:
console.log("位置服务不可用。");
break;
}
}
</script>
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
</body>
</html>
以上就是“基于JavaScript定位当前的地理位置”的完整攻略，希望能对你有所帮助。
本文链接：http://task.lmcjl.com/news/979.html