下面是“基于JavaScript定位当前的地理位置”的完整攻略。
一、前提准备
在开始定位当前的地理位置之前，需要完成以下几个前提准备：
- 获取用户的位置需要用户授权，所以需要在web应用程序中使用HTML5的Geolocation API，而Geolocation只支持在HTTPS或者本地host环境下使用，所以需要对应用进行HTTPS协议的开发或者本地开发。同时需要使用支持Geolocation API的浏览器。
- 需要使用JavaScript语言来实现获取用户位置的功能。
- 要想获取到用户的当前位置，需要在用户的设备中开启位置定位功能。
二、获取用户位置的步骤
获取用户的位置可以分为以下三个步骤：
1. 创建Geolocation对象
创建Geolocation对象，该对象可以通过调用navigator.geolocation来进行创建。
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("Geolocation is not supported by this browser.");
}
2. 监听位置变化
监听位置变化，通过设置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);
}
3. 显示用户位置
最后一步就是将获取到的位置经纬度显示在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 定位当前的地理位置。
示例一：使用百度地图API获取当前位置（适用于中国大陆）
<!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>
示例二：使用Google Map API获取当前位置（全球通用）
<!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定位当前的地理位置”的完整攻略，希望能对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JavaScript定位当前的地理位置 - Python技术站
微信扫一扫 
支付宝扫一扫 