HTML5获取手机方位角并在地图实时显示

最新推荐文章于 2025-05-06 14:13:59 发布

appearchen

最新推荐文章于 2025-05-06 14:13:59 发布

阅读量629

点赞数 8

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 前端 html javascript

本文链接：https://blog.youkuaiyun.com/appearchen/article/details/145615782

1 技术路线

HTML5、Vue、Leaflet（用于呈现地图）、leaflet-rotatedmarker（用于旋转marker定位点），需要https部署。

2 实现流程

2.1 初始化leaflet并显示地图：

initMap() {
   
   
      var tVue = this;
      tVue.map = L.map("map", {
   
   
        center: [36.66374, 117.141833],
        zoom: 15,
        crs: L.CRS.EPSG4326
      });

      var token = "你的token";
      var tdt_sd = L.tileLayer('https://service.sdmap.gov.cn/tileservice/sdpubmap?layer=SDPubMap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + token, {
   
   
        zoomOffset: 1, // 注意crs为EPSG4326有偏移
        noWrap: true,
        bounds: [[-90, -180], [90, 180]],
        crs: L.CRS.EPSG4326
      });
      tVue.map.addLayer(tdt_sd);
    }

2.2 获取当前位置，添加定位图标

var tVue = this;
//获取当前位置
navigator.geolocation.getCurrentPosition(function (position) {
   
   
   //添加位置图标
   tVue.addLocMarker(position.coords.latitude, position.coords.longitude);
 }, function (err) {
   
   
   console.log("geolocation error", err.message);
 });

addLocMarker(lat, lng) {
   
   
  var tVue = this;
  if (tVue.locMarker == null) {
   
   
    var icon = L.icon({
   
   
      iconUrl: imageCurrPosition,
      iconSize