地图几乎是很多项目中不可或缺的一部分，这里介绍下在vue+element中vue-map的使用。
1、安装
npm install vue-amap --save
2、配置
全局配置，在main.js中配置，代码如下：
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
//初始化
VueAMap.initAMapApiLoader({
key: 'your key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],//依赖配置，根据自己的需求引入
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
});
3、使用
3-1、只显示地图及中心点定位
<template>
<div class="content">
<div class="amap-wrapper">
<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle"></el-amap>
</div>
</div>
</template>
<script>
export default {
data() {
return {
center: [121.539693,31.126667],//地图中心点坐标
zoom:16,//初始化地图显示层级
mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.amap-wrapper {
width: 1440px;
height: 600px;
}
</style>
效果图如下
3-2、添加多个点坐标
<div class="content">
<div class="amap-wrapper">
<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
<el-amap-marker v-for="marker in markers" :position="marker.position" :key="marker.id"></el-amap-marker>
</el-amap>
</div>
</div>
</template>
<script>
export default {
data() {
return {
center: [121.539693,31.126667],
zoom:16,
mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
markers: [
{
position: [121.536477,31.126924],
},
{
position:[121.538097,31.126337],
},
{
position: [121.536306,31.127466],
},
{
position:[121.538065,31.127007],
},
{
position: [121.535973,31.125593]
}
],
}
},
methods:{
},
mounted(){
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.amap-wrapper {
width: 1440px;
height: 600px;
}
</style>
效果图如下
3-3、自定义点坐标图案
<div class="content">
<div class="amap-wrapper">
<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
<el-amap-marker v-for="marker in markers" :position="marker.position" :key="marker.id" :icon="marker.icon"></el-amap-marker>
</el-amap>
</div>
</div>
</template>
<script>
import {
pointMarker} from '../../assets/styleJson'
export default {
data() {
return {
center: [121.539693,31.126667],
zoom:16,
mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
markers: [],
}
},
methods:{
point(){
let markers = [];
let windows=[]
let that=this
pointMarker.forEach((item,index)=>{
markers.push({
position: [item.lng,item.lat],
icon:item.url,
})
})
// 加点
this.markers = markers;
},
},
mounted(){
this.point()
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.amap-wrapper {
width: 1440px;
height: 600px;
}
</style>
引入的styleJson结构为
生成的效果图：
3-4、信息窗体的切换
<div class="content">
<div class="amap-wrapper">
<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
<el-amap-marker v-for="marker in markers" :position="marker.position" :key="marker.id" :events="marker.events" :icon="marker.icon"></el-amap-marker>
<el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content" :offset="window.offset"></el-amap-info-window>
</el-amap>
</div>
</div>
</template>
<script>
import {
pointMarker} from '../../assets/styleJson'
export default {
data() {
return {
center: [121.539693,31.126667],
zoom:16,
mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
markers: [],
windows:[],
window:''
}
},
methods:{
point(){
let markers = [];
let windows=[]
let that=this
pointMarker.forEach((item,index)=>{
markers.push({
position: [item.lng,item.lat],
icon:item.url,
events: {
click() {
that.windows.forEach(window => {
window.visible = false; //关闭窗体
});
that.window = that.windows[index];
that.$nextTick(() => {
that.window.visible = true;//点击点坐标，出现信息窗体
});
}
}
})
windows.push({
position: [item.lng,item.lat],
content:"<div>"+item.text+"</div>",//内容
offset:[5,-15],//窗体偏移
visible: false//初始是否显示
})
})
// 加点
this.markers = markers;
//加弹窗
this.windows=windows
},
},
mounted(){
this.point()
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.amap-wrapper {
width: 1440px;
height: 600px;
}
</style>
效果图如下
3-5、区域覆盖
<template>
<div class="content">
<div class="amap-wrapper">
<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
<el-amap-marker v-for="marker in markers" :position="marker.position" :key="marker.id" :events="marker.events" :icon="marker.icon"></el-amap-marker>
<el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content" :offset="window.offset"></el-amap-info-window>
<el-amap-polygon v-for="poly in polygons" :path="poly.path" :key="poly.id" fillColor="rgba(0,216,255,.5)" strokeColor="#f0f" strokeOpacity="0.5" strokeStyle="dashed"></el-amap-polygon>
</el-amap>
</div>
</div>
</template>
<script>
import {
positionPoint, pointMarker} from '../../assets/styleJson'
export default {
data() {
return {
center: [121.539693,31.126667],
zoom:16,
mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
polygonPath: positionPoint,
markers: [],
windows:[],
window: "",
polygons:[],
}
},
methods: {
point(){
let markers = [];
let windows=[]
let that=this
pointMarker.forEach((item,index)=>{
markers.push({
position: [item.lng,item.lat],
icon:item.url,
events: {
click() {
that.windows.forEach(window => {
window.visible = false;
});
that.window = that.windows[index];
that.$nextTick(() => {
that.window.visible = true;
});
}
}
})
windows.push({
position: [item.lng,item.lat],
content:"<div>"+item.text+"</div>",
offset:[5,-15],
visible: false
})
})
// 加窗体
this.markers = markers;
//加弹窗
this.windows=windows
},
polygon(){
let path=[];
let polygon=[]
positionPoint.forEach(item=>{
path.push([item.lng,item.lat])
})
polygon.push({
path:path})
//添加区域覆盖物
this.polygons=polygon
}
},
mounted(){
this.point()
this.polygon()
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.amap-wrapper {
width: 1440px;
height: 600px;
}
</style>
效果图如下
这些就是关于vue-amap的基础使用了