前言：
vue-amap
效果图：
目录：
实现步骤：（源码在最下面）
一、安装插件
二、template配置基础的地图组件
三、data里面定义相关数据
四、撒点的实现，
1、template:
2、data部分定义字段:
3、methods里面动态加点，我这里还给对应的点加弹框了
五、给每个点配置弹框
1、template:
2、data部分定义字段:
3、methods里面动态加点，我这里还给对应的点加弹框了
六、画线
1、template:
2、data部分定义字段:
七、画范围
1、template:
2、data部分定义字段:
源码：
实现步骤：（源码在最下面）
一、安装插件
cnpm install vue-amap --save二、template配置基础的地图组件
<el-amap
vid="amapDemo1"
:center="center"
:zoom="zoom"
:plugin="plugin"
>
</el-amap>三、data里面定义相关数据
center: [108.90315, 34.21903], // 中心位置
zoom: 14,四、撒点的实现，
1、template:
2、data部分定义字段:
3、methods里面动态加点，我这里还给对应的点加弹框了
五、给每个点配置弹框
1、template:
2、data部分定义字段:
3、methods里面动态加点，我这里还给对应的点加弹框了
六、画线
1、template:
2、data部分定义字段:
七、画范围
1、template:
2、data部分定义字段:
源码：
<template>
<div class="mapDiv">
<el-amap
vid="amapDemo1"
:center="center"
:zoom="zoom"
:plugin="plugin"
>
<!-- 在地图上标记点 -->
<el-amap-marker
v-for="(marker,index) in markers"
:position="marker.position"
:events="marker.events"
:content="marker.content"
:key="index"
>
</el-amap-marker>
<!--在地图上显示窗口提示框-->
<el-amap-info-window
v-if="window"
:position="window.position"
:visible="window.visible"
:content="window.content"
></el-amap-info-window>
<!--轨迹线路-->
<el-amap-polyline
:editable="polyline.editable"
:path="polyline.path"
:events="polyline.events">
</el-amap-polyline>
<!--圆点标记-->
<el-amap-circle
v-for="circle in circles"
:center="circle.center"
:radius="circle.radius"
:fill-opacity="circle.fillOpacity"
:events="circle.events">
</el-amap-circle>
</el-amap>
</div>
</template>
<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
let amapManager = new VueAMap.AMapManager()
export default {
props: {
},
data () {
return {
amapManager,
center: [108.90315, 34.21903], // 中心位置
zoom: 14,
makerConf: {
position: [108.90315, 34.21903],
content: ''
},
markers: [],
//线路
polyline: {
path: [
[108.864231, 34.246916],
[108.860626, 34.254436],
[108.840885, 34.252024],
[108.839168, 34.218815],
[108.911609, 34.228467]
],
events: {
click(e) {
alert('click polyline');
},
end: (e) => {
let newPath = e.target.getPath().map(point => [point.lng, point.lat]);
console.log(newPath);
}
},
editable: false,//是否显示线路上的点
},
// 当前窗口
currentWindow: {
position: [0, 0],
content: '',
events: {},
visible: false
},
// 窗口信息框
windows: [],
window:'',
// plugin: [
// 'VueAMap.Scale', //右下角缩略图插件 比例尺
// 'VueAMap.OverView',//地图鹰眼插件
// 'VueAMap.ToolBar', //地图工具条
// 'VueAMap.MapType', //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
// 'VueAMap.Geolocation', //定位控件，用来获取和展示用户主机所在的经纬度位置
// 'VueAMap.loadUI',
// 'VueAMap.Autocomplete', //输入提示插件
// 'VueAMap.PlaceSearch', //POI搜索插件
// "VueAMap.PolyEditor", //编辑 折线多，边形
// "VueAMap.CircleEditor", //圆形编辑器插件
// ],
// ToolBar工具条插件、MapType插件、Scale比例尺插件、OverView鹰眼插件
plugin: ['ToolBar',
// {
// pName: 'MapType',
// defaultType: 0,
// events: {
// init (o) {
// console.log(o)
// }
// }
// },
{
pName: 'Scale',
events: {
init (instance) {
console.log(instance)
}
}
},
{
pName: 'OverView',
events: {
init (instance) {
console.log(instance)
}
}
}],
//圆形范围
circles: [
{
center: [108.90315, 34.21903],
radius: 800,
fillOpacity: 0.5,
events: {
click: () => {
alert('click');
}
}
}
]
};
},
components: {},
computed: {},
created() {
this.initMapData();
},
mounted() {
this.markAndText();
},
methods: {
// 初始化地图
initMapData(){
VueAMap.initAMapApiLoader({
// 高德的key
key: 'a6cc107ba8279ad6eee8d7e6498c6c8e',
// 插件集合
plugin: [
'AMap.Scale', //右下角缩略图插件 比例尺
'AMap.OverView',//地图鹰眼插件
'AMap.ToolBar', //地图工具条
'AMap.MapType', //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
'AMap.Geolocation', //定位控件，用来获取和展示用户主机所在的经纬度位置
'AMapUI.loadUI',
'AMap.Autocomplete', //输入提示插件
'AMap.PlaceSearch', //POI搜索插件
"AMap.PolyEditor", //编辑 折线多，边形
"AMap.CircleEditor", //圆形编辑器插件
],
uiVersion: '1.0.11', // 版本号
resizeEnable: true,
rotateEnable:true,
pitchEnable:true,
pitch:80,
rotation:-15,
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
zooms:[3,28],
zoom: 12,
center: [ 108.90315, 34.21903], // 中心位置
})
},
//配置撒点和对应的数据信息
markAndText(){
let markerData = [
{
position:[108.90315, 34.21903],
text:'这里第一个点'
},
{
position: [108.88071, 34.230738],
text:'这里第二个点'
},
{
position:[108.911609, 34.228467],
text:'这里第三个点'
},
];
let markers = [];
let windows = [];
let self = this;
markerData.forEach((item,i)=>{
markers.push({
position: item.position,
// content:'<div class="prompt">${ 111 }</div>',
events: {
click() {
self.windows.forEach(window => {
window.visible = false;
});
self.window = self.windows[i];
self.$nextTick(() => {
self.window.visible = true;
});
}
}
});
windows.push({
position: item.position,
content: `<div class="prompt">${ item.text }</div>`,
visible: true
});
})
this.markers = markers;
this.windows = windows;
},
},
watch: {}
}
</script>
<style lang='less' scoped>
.mapDiv{
width:100%;
height: 800px;
}
</style>