vue使用高德地图画电子围栏_高德地图的使用 vue-amap+vue
基本配置
1：在vue项目中下载vue-amap
npm install vue-amap --save
文档连接
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中增加事件
vid="skyeye_amapDemo"
id="skyeye_amapDemo"
:events="mapEvents"
:amap-manager="amapManager"
>
2：data中
mapEvents: {
init (o) {
lazyAMapApiLoaderInstance.load().then(() => {
o.setMapStyle("amap://styles/grey"); //自定义的高德地图的样式，我选的是马卡龙
$this.hasDom = true
})
},
},
在watch中监听hasDom 如果值返回了 再次把经纬度的数据放回到地图中
复制代码
创建多边形的电子围栏
效果图
功能点:
用户随意点击任意坐标，进行多边形的绘画，也可拖动点改变多边形的位置
1:.vue文件中引入vue-amap
ref="map"
:zoom="zoom"
:events="events"
:amap-manager="amapManager"
:center="center"
class="amap-demo">
:vid="'ploy'+index"
:key="'ploys'+index"
:ref="`polygon_${index}`"
:path="polygons.path"
fillColor="#0DAAFC"
strokeColor="#00A1E9"
:fillOpacity="0.3">
:position="marker.position"
:vid="index"
:key="'marker' + index"
:editable="true"
:draggable="true"
:events="marker.events">
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 = []
newList.map((elem, i) => {
this.polygons.path.push(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.map((elem, i) => {
this.setData(elem, true)
})
},
//重置坐标点的选中
resetMark () {
this.markers = []
this.curMark = []
this.polygons.path = []
},
},
}
.amap-demo {
height: 100%;
}
复制代码
作业轨迹
效果图
### 功能点：
点击地图用户获取某一段的经纬度，使这段轨迹动起来(播放时间为一分钟)
ref="map"
:zoom="zoom"
:events="events"
:amap-manager="amapManager"
:center="center"
class="amap-demo">
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()
}
}
.amap-page-container,
.amap-demo {
height: 500px;
}
复制代码