高德地图的使用 vue-amap+vue

基本配置

1：在vue项目中下载vue-amap

npm install vue-amap --save

文档连接

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

2: 在main.js引入高德地图

import VueAMap from 'vue-amap';
//注册高德
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '****',//这里是你的高德开发者key
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  v: '1.4.4'
});

使用高德地图 vue-amap报错

地图组件F5刷新会报错 控制台输入

• Uncaught (in promise) TypeError: v.w.uh is not a constructor
• Uncaught TypeError: l is not a function

//在main.js增加这段话 （能清除之前缓存的地图信息）
const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))

amapKeys.forEach(key => {
  // console.log(key)
  localStorage.removeItem(key)
})

Vue.use(VueAMap)

有时地图加载后经纬度返回到地图会提示地图某方法不存在

1:在html中增加事件
 <el-amap ref="skyeye_map"
               vid="skyeye_amapDemo"
               id="skyeye_amapDemo"
               :events="mapEvents"
               :amap-manager="amapManager"
              >
               </el-amap>
               
               
    2：data中 
      mapEvents: {
        init (o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            o.setMapStyle("amap://styles/grey"); //自定义的高德地图的样式，我选的是马卡龙
            $this.hasDom = true
          })
        },
      },
      在watch中监听hasDom 如果值返回了 再次把经纬度的数据放回到地图中

创建多边形的电子围栏

效果图

功能点:

用户随意点击任意坐标，进行多边形的绘画，也可拖动点改变多边形的位置

1:.vue文件中引入vue-amap

<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo"
             ref="map"
             :zoom="zoom"
             :events="events"
             :amap-manager="amapManager"
             :center="center"
             class="amap-demo">
      <el-amap-polygon v-for="(polygon, index) in polygons"
                       :vid="'ploy'+index"
                       :key="'ploys'+index"
                       :ref="`polygon_${index}`"
                       :path="polygons.path"
                       fillColor="#0DAAFC"
                       strokeColor="#00A1E9"
                       :fillOpacity="0.3"></el-amap-polygon>
      <el-amap-marker v-for="(marker, index) in markers"
                      :position="marker.position"
                      :vid="index"
                      :key="'marker' + index"
                      :editable="true"
                      :draggable="true"
                      :events="marker.events"></el-amap-marker>
    </el-amap>
  </div>
</template>
    <script>
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager();//获取高德原生 AMap.Map
export default {
  data () {
    return {
      amapManager,
      zoom: 12,
      center: [121.5273285, 31.21515044],
      events: {
        click: (e) => {
          this.setLang(e)
        },
      },
      markers: [], //标注

      polygons: {
        path: [],
      }, //折线
      curMark: [], //当前路径
    }
  },
  methods: {

    //设置坐标的信息
    setLang (e) {
      let newLat = [e.lnglat.lng, e.lnglat.lat]
      this.setData(newLat)
    },
    //设备图标坐标(参数二：不添加多边形)
    setData (elem, type) {
      let index = this.markers.length
      this.markers.push({
        position: elem,
        events: {
          dragend: (e) => {
            this.dragend(e, index)
          },
          click: (e) => {
            this.deleceData(index)
          }
        },
      })
      if (!type) {
        this.polygons.path.push(elem)
        this.curMark.push(elem)
      }
    },
    //拖拽地图
    dragend (e, index) {
      //获取当前被改变的经纬度信息
      let newData = [e.lnglat.lng, e.lnglat.lat]
      let newList = JSON.parse(JSON.stringify(this.curMark))
      newList[index] = newData
      this.markers[index].position = newData
      this.curMark[index] = newData
      //重新绘制多边形信息
      this.polygons.path = []
      this.polygons.path=  newList.map(elem => {
        return elem
      })
    },
    //删除地图坐标
    deleceData (index) {
      this.curMark.splice(index, 1)
      this.polygons.path.splice(index, 1)
      this.markers = []
      let newList = JSON.parse(JSON.stringify(this.curMark))
      //重新绘制坐标信息
      newList.forEach((elem, i) => {
        this.setData(elem, true)
      })
    },
    //重置坐标点的选中
    resetMark () {
      this.markers = []
      this.curMark = []
      this.polygons.path = []
    },
  },
}
    </script>
    <style lang="less">
.amap-page-container,
.amap-demo {
  height: 100%;
}
</style>

作业轨迹

效果图

### 功能点：
点击地图用户获取某一段的经纬度，使这段轨迹动起来（播放时间为一分钟）
<template>
  <div class="amap-page-container">
    <el-amap vid="attOperTrack"
             ref="map"
             :zoom="zoom"
             :events="events"
             :amap-manager="amapManager"
             :center="center"
             class="amap-demo">
    </el-amap>
  </div>
</template>
<script>
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager();
let map, marker, polyline, polygon, passedPolyline
export default {
  data () {
    return {
      amapManager,
      zoom: 12,
      center: [121.5273285, 31.21515044],
      events: { click: (e) => { this.attOperaTrack() }, },
      img: require('@/assets/image/trackMover.png')
    }
  },
  methods: {
    //点击页面后获取轨迹路径
    attOperaTrack () {
      var lineArr = [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]];
      //判断是否第一次绘制 不是则清除上一次的信息
      if (map === undefined) {
        map = amapManager.getMap()
      }
      if (marker !== undefined) {
        marker.setMap(null);
      }
      if (polyline !== undefined) {
        polyline.setMap(null);
      }
      if (polygon !== undefined) {
        polygon.setMap(null);
      }

      marker = new AMap.Marker({
        map: map,
        position: [116.479658, 39.998528],
        icon: this.img,
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90,
      });

      // 绘制轨迹
      polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir: true,
        strokeColor: "#28F",  //线颜色
        strokeWeight: 6,      //线宽
      });
      passedPolyline = new AMap.Polyline({
        map: map,
        strokeColor: "#AF5",  //线颜色
        strokeWeight: 6,      //线宽
      });

      marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath);
      });
      //计算轨迹长度
      var distance = Math.round(AMap.GeometryUtil.distanceOfLine(lineArr));
      map.setFitView();
      marker.moveAlong(lineArr, distance / 1000 * 90);
    }
  },
  mounted () {
    // this.attOperaTrack()
  }
}
</script>
<style>
.amap-page-container,
.amap-demo {
  height: 500px;
}
</style>