HTML5 新特性 - 地理定位（基于高德地图API）

最新推荐文章于 2024-03-13 16:53:47 发布

黑猫了个怪怪

最新推荐文章于 2024-03-13 16:53:47 发布

阅读量1.4k

点赞数

文章标签： html5 p2p html

本文链接：https://blog.csdn.net/Janicecat/article/details/121798472

版权

定位的基础与原理

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

首先，注册开发者账号，成为高德开放平台开发者
登陆之后，在进入「应用管理」页面「创建新应用」
为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

基本使用方法

新建一个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>

黑猫了个怪怪

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML5 新特性 - 地理定位（基于高德地图API）

定位的基础与原理 IP定位运营商基站定位 GPS定位地理定位的实现地理定位API允许用户向web应用程序提供他们的位置(经纬度).但是这个操作需要用户授权.获取地理定位的相关代码如下:let geoloc = window.navigator.geolocationlet success = function(msg){}let error = function(msg){}geoloc.getCurrentPo...
复制链接

扫一扫