首先 npm install -S vue-amap
然后在 main.js
import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: 'you key', // 插件集合 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], v: '1.4.4' });
map.vue文件
其中有个BUS.js,是基于观察者模式的发布订阅封装
<template> <div class="amap-page-container"> <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" ></el-amap-search-box> <el-amap ref="map" vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo" :events="events"> <el-amap-marker vid="component-marker" :position="makerConf.position" :content="makerConf.content" ></el-amap-marker> </el-amap> </div> </template> <style> .amap-page-container{ height: 300px; position: relative; } .search-box { position: absolute !important; top: 25px; left: 20px; } .amap-demo { height: 300px; } </style> <script> import Bus from './bus'; export default { name: 'amap-page', components: {}, data() { return { zoom: 16, center: [121.5273285, 31.21515044], events:{ init: (o) => { console.log(o.getCenter()) //console.log(this.$refs.map.$$getInstance()); Bus.$emit("init",o); o.getCity(result => { console.log(result) }) /*o.setCity("武汉",result => { console.log(result) })*/ }, "dragend":function(e){ //console.log("dragging",e,this.getCenter()); Bus.$emit(e.type,this); } }, makerConf: { position: [121.5273285, 31.21315058], content:"" }, searchOption: { city: '武汉', citylimit: true }, plugin:[ 'ToolBar', 'Scale' ] }; }, created(){ var me = this; Bus.$on("dragend",function(o){ var point = o.getCenter(); var pos = [point.O,point.P]; me.makerConf.position = [point.O,point.P]; }); Bus.$on("init",function(o){ var point = o.getCenter(); o.getCity(result => { console.log(result); }); console.log(point) //me.makerConf.position = [point.O,point.P]; }); }, mounted(){ }, methods: { //this.$refs.map.$$getCenter() onSearchResult(pois) { let latSum = 0; let lngSum = 0; var me = this; var mymap = me.$refs.map.$$getInstance(); if (pois && pois.length > 0) { console.log(pois) //如果长度为1则无需转化 var poi = pois[0]; var lng = poi["lng"]; var lat = poi["lat"]; me.center = [lng, lat]; me.makerConf.position = [lng, lat]; //me.makerConf.content = poi.name; } }, $Geocoder(options){ //将坐标点转化为,详细地址 options = options || {}; if(AMap){ AMap.plugin(['AMap.Geocoder'], () => { const geocoder = new AMap.Geocoder({ radius: options.radius || 1000, extensions: options.extensions || "all" }) var lnglatXY = options.lnglatXY || [116.396574, 39.992706]; //已知点坐标 geocoder.getAddress(lnglatXY, function(status, result) { if (status === 'complete' && result.info === 'OK') { options.success && options.success(result); }else{ options.error && options.error(status,result); } }); }); } } } }; /* me.$Geocoder({ lnglatXY:[center.lng, center.lat], success:function(res){ console.log(res); } }); * * */ </script>
bus.js
let instance = null; class EventBus { constructor() { if (!instance) { this.events = {}; instance = this; } return instance; } $emit(event, message) { if (!this.events[event]) return; const callbacks = this.events[event]; for (let i = 0, l = callbacks.length; i < l; i++) { const callback = callbacks[i]; callback.call(this, message); } } $on(event, callback) { if (!this.events[event]) this.events[event] = []; this.events[event].push(callback); } } export default new EventBus();
效果图
相关文档地址: https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install