Vue 高德地图的使用PC端版本

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」   ，赢取创作大礼包，挑战创作激励金

Hello!掘金的小伙伴们大家好，我是 摸鱼小公举 ,好久没写文章了前端时间忙着考试复习,工作也忙今天有空就来写文章了;感觉写文章太简单了阅读量不容乐观;写的不好请大家多多指教!今天文章的主体内容就是Vue 高德地图的使用PC端版本!以下代码是我之前项目的代码,之前的项目打不开了所以效果图是网上找了差不多的图片;

正文开始了~

首先申请一个key

全局引入注册地图

安装vue-amap组件

elemefe.github.io/vue-amap/#/…

import VueAMap from "vue-amap"
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
    key: '57f1f8e71bd41a00758d81a8fdfbf826',
    plugin: [
        "AMap.PolyEditor"
    ],
    v: "1.4.10"
});

初始化显示地图

这个放在mounted里面调用

try {            
 this.map = new AMap.Map('container', {
     zoom: 14
     });                
 } catch {
    setTimeout(() => {
     this.map = new AMap.Map('container', {
     zoom: 14
     });
     }, 1500);
 }

数据的转换

后台返回的数据 是GPS的,需要转成

 WGS-84 to GCJ-02

 GPS 转 腾讯或高德

gcj_encrypt: function (wgsLat, wgsLon) {
   if (this.outOfChina(wgsLat, wgsLon)) {
   return { 'lat': wgsLat, 'lon': wgsLon };
   } else {
   var d = this.delta(wgsLat, wgsLon);
   return { 'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon };
   }
   },

倘若是传给后台的要转成 GPS的坐标给后台

 GCJ-02 to WGS-84

 腾讯或高德 转 GPS

gcj_decrypt: function (gcjLat, gcjLon) {
   if (this.outOfChina(gcjLat, gcjLon)) {
   return { 'lat': gcjLat, 'lon': gcjLon };
   } else {
   var d = this.delta(gcjLat, gcjLon);
   return { 'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon };
   }
   },

多边形数据的展示 ( 多边形 Polygon )

for (let i = 0; i < res.data.length; i++) {
      res.data[i].coordinate = JSON.parse(res.data[i].coordinate);
      res.data[i].path = [];
      for (let j = 0; j < res.data[i].coordinate.length; j++) {
      let _locat = convers.gcj_encrypt(
      parseFloat(res.data[i].coordinate[j].lat),
      parseFloat(res.data[i].coordinate[j].lng)
      );
      res.data[i].path.push([_locat.lon + '', _locat.lat + '']);
      }
      }
      this.fenceArr = res.data;
      this.fencePolygon = new AMap.Polygon({
      path: res.data[0].path,
      bubble: true,
      strokeWeight: 3,  //线条宽度
      strokeColor: '#000', //线条颜色
      strokeOpacity: 1, //线条透明度
      fillColor: '#000',//多边形填充颜色
      fillOpacity: 0.1,//填充透明度
      zIndex: 50

       });

     this.map.add(this.fencePolygon);

路线展示 ( 折线 Polyline )

拿到marker的所有坐标数据就存取来,没必要总是调用获取marker点的数据

if (res.data && res.data.length > 0) {
    var ridingOption = {
        policy: 1
    };
    var riding;
    AMap.plugin(['AMap.Riding'], function() {
        riding = new AMap.Riding(ridingOption);
    });
    this.path = [];
    for (let i = 0; i < res.data.length; i++) {
        let _locat = convers.gcj_encrypt(
            parseFloat(res.data[i].lat),
            parseFloat(res.data[i].lng)
        );
        this.path.push([_locat.lon, _locat.lat]);
    }
    if (this.path) {
       //这里是线路展示起点和中的的mark点展示
        var startMarker = new AMap.Marker({
            position: this.path[0],
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
            map: this.map
        });
        var endMarker = new AMap.Marker({
            position: this.path[this.path.length - 1],
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
            map: this.map
        });                
        var polyline = new AMap.Polyline({
            path: this.path,

            borderWeight: 3,
            strokeColor: '#409eff',
            strokeOpacity: 1,
            strokeWeight: 6,
            // 折线样式还支持 'dashed'
            strokeStyle: 'solid',
            // strokeStyle是dashed时有效
            strokeDasharray: [10, 5],
            lineJoin: 'round',
            lineCap: 'round',
            zIndex: 50
        });

        polyline.setMap(this.map);
        // 缩放地图到合适的视野级别
        this.map.setFitView([polyline]);
    }
}

所有marker点展示

let _locat = convers.gcj_encrypt(parseFloat(arr[i].lat), parseFloat(arr[i].lng));
if (arr[i].style == 1) {
    arr[i].image = '/img/car_marked.png';
} else {
    arr[i].image = '/img/dcar_marked.png';
}
let marker = new AMap.Marker({
    position: new AMap.LngLat(_locat.lon, _locat.lat),
    extData: {
        id: i
    },
    icon: new AMap.Icon({
        image: arr[i].image,
        size: new AMap.Size(52, 52), //图标大小
        imageSize: new AMap.Size(26, 33)
    })
});
// 对marker点进行展示描述；鼠标移到mark点有个气泡弹框来描述
marker.content =
    '<div><span>电量：</span>' +
    arr[i].battery +
    '%</div>\
    <div><span>编号：</span>' +
    arr[i].qrcode +
    '</div>\
    <div><span>最后信号时间：</span>' +
    stampTime(arr[i].last_ride_time) +
    '</div>\
    <div><span>设备编号：</span>' +
    arr[i].device +
    '</div>\
    <div id="makdetail" style="cursor: pointer;">详情: 点击查看车辆详情</div>';
marker.on('click', this.markerClick); //这里是个mark添加点击事件
markersArr.push(marker);
}
// OverlayGroup批处理矢量图形
// 使用OverlayGroup对地图上的覆盖物做集合操作，适用于需要对覆盖物批量处理的场景。
this.markers = new AMap.OverlayGroup(markersArr);
this.map.add(this.markers);
//使地图自适应显示到合适的范围
this.map.setFitView([this.fencePolygon, this.markers]);

结语

这是我之前做项目的经验总结;有什么不对的地方欢迎指教;好了,文章到这来就结束了;非常感谢大家阅读。

「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」