vue-amap的使用
情景描述：1.点击查看按钮弹出弹框显示地图，搜索地址后地图上进行选点获取经纬度、省市地区等信息，点击确定按钮关闭弹窗将获取到的信息填入表单
2.在表单已有经纬度数据时点击按钮地图根据经纬度信息回显标记到相应位置
效果如图：
地图搜索选点
点击确定将信息填入表单
step1.安装 npm install --save vue-amap
step2.main.js中引入配置
// 全局组件高德地图import VueAMap from 'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({key: '你的应用key',plugin: ['AMap.Scale','AMap.OverView','AMap.ToolBar','AMap.MapType','AMap.PlaceSearch',"AMap.Autocomplete",'AMap.Geolocation','AMap.Geocoder',"AMap.AMapUI",// UI组件],v: '1.4.4',// 默认高德 sdk 版本为 1.4.4uiVersion: '1.0'})
setp3.封装vue-amap组件 map.vue
<template><div><el-dialogclass="container"append-to-bodytitle="查看地图":visible.sync="visible":before-close="handleClose":close-on-click-modal="false"top="0vh"width="100%"><div><el-amap-search-box id="search" class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />//搜索框<el-amap class="amap-box" :zoom="amap.zoom" :center="amap.center" :plugin="amap.plugin" :events="amap.events"><el-amap-marker v-for="(marker, index) in amap.markers" :key="'marker' + index" :position="marker.position" /><el-amap-textv-for="(marker, index) in amap.markers":key="'text' + index":text="marker.text":offset="marker.offset":position="marker.position"/></el-amap></div><span slot="footer" class="dialog-footer"><el-button type="primary" @click="sure">确 定</el-button><el-button @click="handleClose">关 闭</el-button></span></el-dialog></div></template><script>function getFormData() {return {lat: '39.909186',lon: '116.39746',orgAddr: '区政府',province: '',city: '',district: ''}}import {AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'const amapManager = new AMapManager()export default {name: 'Map',data() {const vm = thisreturn {visible: false,amapManager,// form对象dataForm: getFormData(),// 地图搜索对象searchOption: {city: '全国',citylimit: true},// 地图对象amap: {zoom: 16,center: [116.319802, 39.98294],events: {// 点击获取地址的数据click(e) {const {lng, lat } = e.lnglatvm.dataForm.lon = lngvm.dataForm.lat = lat// 这里通过高德 SDK 完成。var 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)Addr = result.regeocode.formattedAddressvm.dataForm.province = result.regeocode.addressComponent.provincevm.dataForm.city = result.regeocode.addressComponent.cityvm.dataForm.district = result.regeocode.addressComponent.districtvm.dataForm.lat = lat ? lat.toString() : ''vm.dataForm.lon = lng ? lng.toString() : ''vm.amap.markers = []const obj = {position: [lng, lat],text: result.regeocode.formattedAddress,offset: [0, 30]}vm.amap.markers.push(obj)}}})}},plugin: ['ToolBar'],markers: [{position: [116.319802, 39.98294],text: '中关村',offset: [0, 30]}]}}},methods: {// 地图搜索回调onSearchResult(pois) {const vm = thisvm.amap.markers = []let latSum = 0let lngSum = 0if (pois.length > 0) {pois.forEach((poi, index) => {const {lng, lat } = poiif (index === 0) {lngSum = lnglatSum = latconst obj = {position: [poi.lng, poi.lat],text: poi.name,offset: [0, 30]}vm.amap.markers.push(obj)console.log('地图搜索回调', poi)Addr = poi.namevm.dataForm.lat = poi.lat ? poi.lat.toString() : ''vm.dataForm.lon = poi.lng ? poi.lng.toString() : ''}})vm.amap.center = [lngSum, latSum]}},// 打开弹窗open(data) {const vm = thisvm.dataForm = getFormData()if (data) {if (data.longitude == 'undefined' && data.latitude == 'undefined') {vm.amap.markers = [{position: [116.319802, 39.98294],text: '区政府',offset: [0, 30]}]vm.amap.center = [116.319802, 39.98294]} else {//通过已有的数据进行回显标记vm.amap.markers = [{position: [data.longitude, data.latitude],text: data.address,offset: [0, 30]}]vm.amap.center = [data.longitude, data.latitude]}}vm.visible = true},// 关闭弹窗handleClose() {const vm = thisvm.visible = falsevm.dataForm = getFormData()vm.amap.markers = []const obj = {position: [vm.dataForm.lon, vm.dataForm.lat],text: Addr,offset: [0, 30]}vm.amap.markers.push(obj)vm.amap.center = [vm.dataForm.lon, vm.dataForm.lat]},// 提交方法sure() {const vm = thisthis.$emit('updateLocation',Addr,vm.dataForm.lon,vm.dataForm.lat,vm.dataForm.province,vm.dataForm.city,vm.dataForm.district)vm.handleClose()}}}</script><style lang="scss" scoped>.container {width: 80% !important;height: 80%;margin: auto;overflow: hidden;}.amap-box {height: 64vh;}.search-box {position: absolute;z-index: 5;width: 70%;left: 13%;top: 10px;height: 30px;}.search-box .el-input {float: left;width: 100%;height: 100%;box-sizing: border-box;border-radius: 0 7px 7px 0;outline: none;position: relative;}.search-box .el-button {position: absolute;right: 0;top: 1px;width: 20%;background: #38a28a;border-radius: 0 7px 7px 0;border: none;color: #fff;outline: none;}.tip-box {text-align: center;width: 100%;position: absolute;top: 35px;padding: 10px 0;background-color: #fff;opacity: 0.8;}</style>
在所需要的文件中引用地图组件
<template><div><el-form ref="form" :model="form" append-to-body label-width="110px"><el-col :span="12"><el-form-item label="获取地址" class="form-item"><el-button type="primary" size="small" @click="openMap">获取地址</el-button></el-form-item></el-col><el-col :span="12"><el-form-item label="所属行政区" class="form-item"><el-input v-model="form.district" size="small" placeholder="所属行政区" /></el-form-item></el-col><el-col :span="12"><el-form-item label="所属省份" class="form-item"><el-input v-model="form.province" size="small" placeholder="所属省份" /></el-form-item></el-col><el-col :span="12"><el-form-item label="所属城市" class="form-item"><el-input v-model="form.city" size="small" placeholder="所属城市" /></el-form-item></el-col><el-col :span="12"><el-form-item label="经度" class="form-item"><el-input v-model="form.longitude" size="small" placeholder="经度" /></el-form-item></el-col><el-col :span="12"><el-form-item label="纬度" class="form-item"><el-input v-model="form.latitude" size="small" placeholder="纬度" /></el-form-item></el-col><el-col :span="24"><el-form-item label="详细地址" class="form-item"><el-input v-model="form.address" size="small" placeholder="详细地址" /></el-form-item></el-col></el-form>//使用地图组件<Map ref="map" @close="$refs.map.close()" @updateLocation="updateLocation" /></div></template><script>//引入地图组件import Map from './map.vue'export default {//注册组件components: {Map},data() {return {form: {address: '',province: '',city: '',latitude: 0, // 纬度longitude: 0, // 经度district: ''}}},methods: {openMap() {if (this.form.longitude == 'undefined' && this.form.latitude == 'undefined') {this.$refs.map.open()} else {this.$refs.map.open(this.form)}},updateLocation(orgAddr, lon, lat, province, city, district) {this.form = {address: orgAddr,province: province,city: city,latitude: lat, // 纬度longitude: lon, // 经度district: district}}}}</script>
