引用vue-amap
yarn add vue-amap
main配置
//vue-amapimportvueamapfrom ' vue-AMAP '； vue.use(vueamap )； 初始化vue-amap，高德的key值需要自己向vue AMAP.initamapapiloader (key : )、plugin:(amap.scale )、) AMap.OverView申请' AMap.Geocoder'] '，v: '1.4.4'，ui版本： ' 1.0 ' }；定位MAP组件封装
templatedivclass=' map container ' divclass=' search-box ' inputv-model=' search key ' type=' search ' id=' search 在移动设备中，取默认范围[3-19]、取值范围[3-19] center :地图中心点坐标值plugin :用于地图的插件事件：事件--El-AMAP class=' AMAP-box ' 3360 AMAP-manager=' AMAP manager ' 3360 -标记-- el-amap-marker v-for='(marker，index ) in markers (: position=(marker ) :key=(index )/El-ex 导出默认值{ name : ' map '，props : { LNG lat : }默认值： ()={return(LNG: '，lat:'}； (，type: Object } } )、data )、{ const self=this； return { address: null，searchkey: '，amapManager，markers: []，searchoption:{city: '宁波，citylilililion adname: '，name: '' }，center : [ 121.329402，31.228667 ]，dddhmg: 15，lnng loaded: false，events 3360 )；//地址的数据click(e ) )//console.log ) self.markers=[]； const { lng，lat }=e.lnglat； self.lng=lng； self.lat=lat； self.center
= [lng, lat]; self.markers.push([lng, lat]); // 这里通过高德 SDK 完成。 const geocoder = new AMap.Geocoder({ radius: 1000, extensions: 'all' }); geocoder.getAddress([lng, lat], function(status, result) { if (status === 'complete' && result.info === 'OK') { if (result && result.regeocode) { // console.log(result); self.address = result.regeocode.formattedAddress; self.searchKey = result.regeocode.formattedAddress; self.$nextTick(); const poi = result.regeocode.addressComponent; const d = { pos: [lng, lat], adname: poi.district, // name: poi.name, address: self.address }; self.$emit('poi', d); } } }); } }, // 一些工具插件 plugin: [ // { // pName: 'Geocoder', // events: { // init (o) { // console.log(o.getAddress()) // } // } // }, { // 定位 pName: 'Geolocation', events: { init(o) { // o是高德地图定位插件实例 o.getCurrentPosition((status, result) => { if (result && result.position) { // 设置经度 self.lng = self.lnglat.lng || result.position.lng; // 设置维度 self.lat = self.lnglat.lat || result.position.lat; // 设置坐标 self.center = [self.lng, self.lat]; self.markers.push([self.lng, self.lat]); // load self.loaded = true; // 页面渲染好后 self.$nextTick(); } }); } } }, { // 工具栏 pName: 'ToolBar', events: { init(instance) { // console.log(instance); } } }, { // zjdxb pName: 'OverView', events: { init(instance) { // console.log(instance); } } }, { // 地图类型 pName: 'MapType', defaultType: 0, events: { init(instance) { // console.log(instance); } } }, { // 搜索 pName: 'PlaceSearch', events: { init(instance) { // console.log(instance) } } } ] }; }, created() { this.searchKey = this.lnglat.address; }, methods: { initSearch() { const vm = this; const map = this.amapManager.getMap(); AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) { var poiPicker = new PoiPicker({ input: 'search', placeSearchOptions: { map: map, pageSize: 10 }, suggestContainer: 'searchTip', searchResultsContainer: 'searchTip' }); vm.poiPicker = poiPicker; // 监听poi选中信息 poiPicker.on('poiPicked', function(poiResult) { const source = poiResult.source; const poi = poiResult.item; if (source !== 'search') { poiPicker.searchByKeyword(poi.name); } else { poiPicker.clearSearchResults(); vm.markers = []; const lng = poi.location.lng; const lat = poi.location.lat; const address = poi.cityname + poi.adname + poi.name; vm.center = [lng, lat]; vm.markers.push([lng, lat]); vm.lng = lng; vm.lat = lat; vm.address = address; vm.searchKey = address; const d = { pos: [lng, lat], adname: poi.adname, name: poi.name, address: poi.pname + ' ' + poi.cityname + ' ' + poi.adname + ' ' + poi.address + ' ' + poi.name }; // console.log(JSON.stringify(poi, null, 3)); // vm.$parent.getPos([lng, lat], poi.adname, poi.name); vm.$emit('poi', d); } }); }); }, searchByHand() { if (this.searchKey !== '') { this.poiPicker.searchByKeyword(this.searchKey); } } }};</script><style lang="less">.mapcontainer { width: 100%; height: 400px; /* position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); */ border: 1px solid #999; margin-top: 40px; position: relative; .search-box { width: 100%; border: 1px solid #999; margin: 0 auto; height: 42px; position: absolute; top: -50px; left: 0; z-index: 888; display: flex; justify-content: space-between; } .search-box input { width: 80%; height: 100%; border: none; outline: none; padding: 0 8px; box-sizing: border-box; } .search-box button { width: 20%; height: 100%; border: none; background: #1890FF; color: #fff; outline: none; } .tip-box { width: 100%; max-height: 260px; position: absolute; top: 40px; overflow-y: auto; background-color: #fff; }}</style>使用方式
<Map v-if="showMap" @poi="poi" :lnglat="form" /><a-button @ok="setAddress">地图选点</a-button> //数据form:{lng:121.536353,lat:29.875806,address: "浙江省宁波市海曙区西门街道中山西路科创大厦(布政巷)"}//方法poi(e) { console.log(e); this.pois = e;},setAddress() { this.$set(this.form, 'address', this.pois.address); this.$set(this.form, 'lng', this.pois.pos[0]); this.$set(this.form, 'lat', this.pois.pos[1]); this.$refs['address'].onFieldBlur(); },