vue-amap使用
第一步：npm install vue-amap --save
第二步：在main.js中引入
import VueAMap from "vue-amap"
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key: '你申请的key值',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
v: '1.4.4'
});
第三步：<template>
<div class="hello">
<div class="search-box" style="position:absolute;z-index:100000;top:50px;left:50px">
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input placeholder="请输入搜索关键词" clearable v-model="keyword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">搜 索</el-button>
</el-form-item>
</el-form>
</div>
<el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo">
<el-amap-marker
v-for="(marker, index) in markers"
:key="index"
:position="marker.position"
:icon="marker.icon"
:animation="marker.animation"
:events="marker.events"
:label="marker.label">
</el-amap-marker>
<el-amap-info-window
:position="currentWindow.position"
:isCustom="true"
:offset="winOffset"
:visible="currentWindow.visible">
<div class="window-info">
<div class="title">标题</div>
<div class="desc">{{currentWindow.content}}</div>
</div>
</el-amap-info-window>
</el-amap>
</div>
</template>
<script>
import { AMapManager } from 'vue-amap';
import red from "@/assets/image/red.png"
import blue from "@/assets/image/blue.png"
export default {
name: 'Map',
data () {
return {
zoom: 15,
center: [121.5273285, 31.21515044],
plugin: ['ToolBar', {
pName: 'MapType',
defaultType: 0,
events: {
init(o) {
console.log(o);
}
}
}],
currentWindow:{
position:[121.5273285, 31.21515044],
content:"",
visible:false
},
keyword:"",
markers:[],
copyMarkers:[],
copyCenter:[121.5273285, 31.21515044],
winOffset:[0,-34],
timer:null
}
},
created(){
this.init();
},
methods:{
init(){
let arr=[];
let lat=121.5273285,lan=31.21515044;
let data=[];
for(let i=0;i<5;i++){
data.push({
lat:lat+(Math.random() - 0.5) * 0.02,
lan:lan+(Math.random() - 0.5) * 0.02,
type:Math.floor(Math.random()*2)+1,
title:"测试人员"+Math.floor(Math.random()*100)+"号",
desc:"<div>啊郭德纲111111111111111</div><div>111111</div>"
})
}
data.map((v,k)=>{
arr.push({
position:[v.lat,v.lan],
animation:"AMAP_ANIMATION_DROP",
title:v.title,
content:v.desc,
label:{
content:v.title,
offset: [-20, -25]
},
icon:v.type==1?blue:red,
events:{
mouseover:()=>{
let item={...v};
item.position=[v.lat,v.lan];
item.content=v.desc;
item.visible=true;
this.currentWindow=item;
},
mouseout:()=>{
this.currentWindow.visible=false;
}
}
})
})
this.markers=arr;
this.copyMarkers=JSON.parse(JSON.stringify(arr));
},
search(){
let key=this.keyword;
let markers=this.copyMarkers;
clearTimeout(this.timer);
if(!key){//当搜索关键词置空时还是把所有设备显示出来
this.markers=this.copyMarkers;
this.center=this.copyCenter;
this.resetEvent();
return;
};
let item=markers.find((v)=>{
return v.title==key;
});
let index=markers.findIndex((v)=>{
return v.title==key;
})
if(!item){
this.$message.warning("未绑定相关设备");
return;
}
this.markers=[item];
this.markers[0].animation="AMAP_ANIMATION_DROP";
this.center=item.position;
this.resetEvent();
this.timer=setTimeout(()=>{
this.markers[0].animation="AMAP_ANIMATION_NONE";
this.resetEvent();
},4000)
},
resetEvent(){
this.markers.map((v,k)=>{
v.events={
mouseover:()=>{
let item={...v};
item.position=v.position;
item.content=v.content;
item.visible=true;
this.currentWindow=item;
},
mouseout:()=>{
this.currentWindow.visible=false;
}
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello{
margin: -19px;
.amap-demo {
height: calc(100vh - 100px);
/deep/ .amap-container img{
width: 28px;
}
/deep/ .amap-marker-label{
padding: 6px;
border: solid #e0e0e0 1px;
border-radius: 3px;
margin-top:-4px;
}
}
.window-info{
background-color: #fff;
padding:20px;
}
}
</style>
