- 安装插件
//高德地图插件
npm install vue-amap --save
//高德vue组件库
npm install @vuemap/vue-amap --save
2.官网
申请高德地图账号和key。高德官网入门指南
@vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库。组件库网址
- main.js中引入
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: '',
// 插件集合 （插件按需引入）
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',
'AMap.PolyEditor', 'AMap.Circle', 'AMap.CircleEditor', 'AMap.DistrictSearch','AMap.CircleMarker','AMap.Polyline','AMap.RangingTool'
,'AMap.CitySearch','AMap.MoveAnimation','AMap.RectangleEditor','AMap.Rectangle','AMap.LngLat','AMap.Bounds','AMap.Map',
'AMap.Polygon'
// 'AMap.Object3DLayer', 'AMap.Object3D'
],
viewMode:'3D',//开启3D视图,默认为关闭
});
//高德的安全密钥
window._AMapSecurityConfig = {
securityJsCode: '',
}
- 地图选点
<template>
<div>
<div style="height: 500px;">
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:center="center"
:zoom="zoom"
viewMode="3D"
:plugin="plugin"
:events="events"
class="amap-demo"
>
<el-amap-marker :position="marker.position">
<div
style="color: #eee;width: 20px;height: 20px;text-align: center;position: relative">
<i class="iconfont icon-xiaoshuidifuzhi"
style="color:#009cf9;font-size: 30px;"
></i>
</div>
</el-amap-marker>
</el-amap>
</div>
<div>
坐标：{
{
address }}
</div>
</div>
</template>
<script>
import {
AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
components: {
},
props: {
},
data: function (){
const self = this;
return {
amapManager,
plugin: [
"ToolBar",
{
pName: "MapType",
defaultType: 0,
events: {
init(o) {
},
},
},
],
address:null,
center: [121.59996, 31.197646],
zoom: 12,
events: {
init: (o) => {
o.setDefaultCursor("crosshair");
},
moveend: () => {
},
zoomchange: () => {
},
click: (e) => {
self.address = e.lnglat.lng + "," + e.lnglat.lat
// 将设定的航点展示在地图上
self.marker = {
position: [e.lnglat.lng, e.lnglat.lat],
}
},
},
marker: {
position: [121.5273285, 31.21515044],
},
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
5. 电子围栏
<template>
<div>
<div style="height: 500px;">
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:center="center"
:zoom="zoom"
viewMode="3D"
:plugin="plugin"
:events="events"
class="amap-demo"
>
<el-amap-circle
v-if="circles.visible"
:center="circles.circleCenter"
:radius="circles.radius"
:editable="circles.edit"
:draggable="circles.draggable"
:fillColor="circles.fillColor"
:strokeColor="circles.strokeColor"
></el-amap-circle>
<el-amap-rectangle
v-if="rectangles.visible"
:bounds="rectangles.path"
:editable="rectangles.edit"
:draggable="rectangles.draggable"
:fillColor="rectangles.fillColor"
:strokeColor="rectangles.strokeColor"
></el-amap-rectangle>
<el-amap-polygon
v-if="polygons.visible"
:path="polygons.path"
:editable="polygons.edit"
:draggable="polygons.draggable"
:fillColor="polygons.fillColor"
:strokeColor="polygons.strokeColor"
/>
</el-amap>
</div>
<div>
<el-button @click="draw('circle')">绘制圆形</el-button>
<el-button @click="draw('rectangle')">绘制矩形</el-button>
<el-button @click="draw('polygon')">绘制多边形</el-button>
</div>
</div>
</template>
<script>
import {
AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
components: {
},
props: {
},
data: function (){
const self = this;
return {
amapManager,
type:null,
plugin: [
"ToolBar",
{
pName: "MapType",
defaultType: 0,
events: {
init(o) {
},
},
},
],
center: [121.59996, 31.197646],
zoom: 12,
clicksNum:0,//点击次数
circles:{
center: [121.5273285, 31.21515044],
draggable: false,
visible: true,
edit: false,
circleCenter: [0, 0],
radius: 0,
strokeColor:'#F56C6C',
fillColor:'#F56C6C'
},
rectangles:{
firstPoint:[],
visible: true,
path:[[0, 0], [0, 0]],
edit: false,
draggable: false,
fillColor:'#F56C6C',
strokeColor:'#F56C6C',
},
polygons:{
list:[],
visible: true,
path:[],
edit: false,
draggable: false,
fillColor:'#F56C6C',
strokeColor:'#F56C6C',
},
events: {
init: (o) => {
o.setDefaultCursor("crosshair");
},
moveend: () => {
},
zoomchange: () => {
},
click: (e) => {
if(self.type == 'circle'){
self.clicksNum = self.clicksNum + 1//点击次数
if(self.clicksNum%2===0){
self.circles = {
...self.circles,
radius: self.getDistanceBmarker(self.circles.circleCenter,[e.lnglat.lng, e.lnglat.lat]),
}
}else{
self.circles.radius = 0
self.circles.circleCenter = [e.lnglat.lng, e.lnglat.lat]
}
}else if(self.type == 'rectangle'){
self.clicksNum = self.clicksNum + 1//点击次数
if(self.clicksNum%2===0){
self.rectangles = {
...self.rectangles,
path: [self.firstPoint, [e.lnglat.lng, e.lnglat.lat]]
}
}else{
self.firstPoint = [e.lnglat.lng, e.lnglat.lat]
}
}else if(self.type == 'polygon'){
self.clicksNum = self.clicksNum + 1//点击次数
if(self.clicksNum%4===0){
self.polygons.list[3] = [e.lnglat.lng, e.lnglat.lat]
self.polygons = {
...self.polygons,
path: self.polygons.list
}
}else{
self.polygons.list[self.clicksNum-1] = [e.lnglat.lng, e.lnglat.lat]
}
}
},
},
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
draw(type){
this.clicksNum = 0,//点击次数
this.type = type
},
//算出两个点坐标间的直线距离
getDistanceBmarker(m1, m2) {
// AMap.LngLat
let p1 = new window.AMap.LngLat(m1[0], m1[1]);
var distance = Math.round(p1.distance(m2));
return distance;
},
},
};
</script>
<style lang="scss" scoped>
</style>
- 3D地图（鼠标右键可拖拽调整方向）
<template>
<div>
<div style="height: 500px;">
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:center="center"
:zoom="zoom"
<!-- 3D -->
:pitchEnable="true"
:rotateEnable="true"
:pitch="50" 地图俯仰角度，有效范围 0 度- 83 度
viewMode="3D"
<!-- 3D -->
:plugin="plugin"
:events="events"
class="amap-demo"
>
<el-amap-marker :position="marker.position">
<div
style="color: #eee;width: 20px;height: 20px;text-align: center;position: relative">
<i class="iconfont icon-xiaoshuidifuzhi"
style="color:#009cf9;font-size: 30px;"
></i>
</div>
</el-amap-marker>
</el-amap>
</div>
<div>
坐标：{
{
address }}
</div>
</div>
</template>
<script>
import {
AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
components: {
},
props: {
},
data: function (){
const self = this;
return {
amapManager,
plugin: [
"ToolBar",
{
pName: "MapType",
defaultType: 0,
events: {
init(o) {
},
},
},
],
address:null,
center: [121.59996, 31.197646],
zoom: 12,
events: {
init: (o) => {
o.setDefaultCursor("crosshair");
},
moveend: () => {
},
zoomchange: () => {
},
click: (e) => {
self.address = e.lnglat.lng + "," + e.lnglat.lat
// 将设定的航点展示在地图上
self.marker = {
position: [e.lnglat.lng, e.lnglat.lat],
}
},
},
marker: {
position: [121.5273285, 31.21515044],
},
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
