定位的基础与原理
IP
定位运营商基站定位
GPS
定位
地理定位的实现
地理定位API
允许用户向web
应用程序提供他们的位置(经纬度).但是这个操作需要用户授权.
获取地理定位的相关代码如下:
let geoloc = window.navigator.geolocation
let success = function(msg){}
let error = function(msg){}
geoloc.getCurrentPosition(
success, // 获取定位成功后执行的回调函数
error, // 获取定位失败后执行的回调函数
option // {}对象类型, 指定定位配置参数
);
一旦定位成功, 将会输出如下位置信息:
coords: Coordinates
accuracy: 19218 定位准确度
altitude: 0 海拔高度
altitudeAccuracy: null 海拔准确度
heading: NaN
latitude: 39.9078 纬度
longitude: 116.3975 经度
speed: NaN 运动速度
timestamp: 1636426246419 毫秒时间戳
接入第三方位置服务平台 - 百度地图/高德地图
高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口,移动端、PC端一体化设计,一套 API 兼容众多系统平台。目前 JS API 免费开放使用。
JS API 提供了2D、3D地图模式,满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求,同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。
JS API 拥有完善的文档体,系统学习地图和服务接口调用请前往教程,快速了解 JS API 的全部核心能力请前往示例中心。查阅详细接口说明文档请前往参考手册,使用遇到问题可查看常见问题或者提交工单。
注册账号并申请Key
基本使用方法
新建一个
html
页面新增一个
div
, 设置css
与id
属性.引入高德地图的
script
脚本. (替换自己申请的key
)创建
map
对象, 在div
中初始化地图.
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#container {
width: 640px;
height: 360px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container"></div>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"
></script>
<script>
let geoloc = window.navigator.geolocation;
geoloc.getCurrentPosition(
res => {
let lat = res.coords.latitude; //纬度
let lng = res.coords.longitude; //精度
//初始化地图
var map = new AMap.Map("container", {
zoom: 18, //级别
center: [lng, lat], //中心点坐标
viewMode: "3D", //使用3D视图
});
//添加点标记
var marker = new AMap.Marker({
position: [lng, lat],
});
map.add(marker);
//弹出信息窗体
marker.on("click", e => {
var infoWindow = new AMap.InfoWindow({
isCustom: false, //使用默认窗口
content: "<div>信息窗体</div>",
offset: new AMap.Pixel(16, -45),
closeWhenClickMap: true,
});
infoWindow.open(map, marker.getPosition());
});
//引入AMap的插件
AMap.plugin(
[
"AMap.ToolBar",
"AMap.Scale",
"AMap.OverView",
"AMap.MapType",
"AMap.Geolocation",
"AMap.PlaceSearch", //POI搜索
"AMap.Geocoder", //地理编码,地址解析
],
function () {
//完成地理编码(str -> 坐标
let geocoder = new AMap.Geocoder({
city: "北京",
extensions: "all",
});
geocoder.getLocation("北京大学", (s, res) => {
console.log("地理编码:", res);
});
//逆地理编码(坐标 -> str)
geocoder.getAddress([106, 35], (s, res) => {
console.log("逆地理编码:", res);
});
// 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件,在地图右下角显示地图的缩略图
map.addControl(new AMap.OverView({ isOpen: true }));
// 在图面添加类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType());
// 在图面添加定位控件,用来获取和展示用户主机所在的经纬度位置
map.addControl(
new AMap.Geolocation({
buttonOffset: new AMap.Pixel(20, 50),
})
);
//位置对象检索,搜索
//创建PlaceSearch对象,按关键字搜索相关位置结果
let placeSearch = new AMap.PlaceSearch({
city: "重庆", //指定城市/区号
pageSize: 50,
});
placeSearch.search("学校", (status, result) => {
console.log("status:", status);
console.log("result:", result);
});
placeSearch.getDetails("B000A816R6", (status, res) => {
console.log(res);
});
}
);
},
err => {
console.warn(err);
},
{ timeout: 5000 }
);
</script>
</body>
</html>