安装
npm install vue-amap
引入使用和配置(记得先去申请一个高德地图的账号)
import VueAMap from 'vue-amap'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '3b576d3486dc84adc303919ebc399dba',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMap.Geocoder', 'AMap.AMapManager', 'AMap.Marker'],
v: '1.4.4'
});
组件中使用
<div class="amap-page-container">
<el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo">
<el-amap-ground-image v-for="groundimage in groundimages" :url="groundimage.url" :bounds="groundimage.bounds" :events="groundimage.events"></el-amap-ground-image>
</el-amap>
</div>
<script>
import { AMapManager } from 'vue-amap';
export default {
data () {
return{
zoom: 7,
center: [121.5273285, 31.21515044],
groundimages: [
{
url: '//faas.elemecdn.com/desktop/media/img/appqc.95e532.png',
bounds: [[121.5273285, 31.21515044], [122.9273285, 3.31515044]],
events: {
click() {
alert('click groundimage');
}
}
}
]
}
},
</script>
图中的二维码是设置的图标(随便找了张图)