VUE使用【高德地图】vue-amap自定义封装组件带搜索功能及回显标记功能
vue-amap的使用情景描述:1.点击查看按钮弹出弹框显示地图,搜索地址后地图上进行选点获取经纬度、省市地区等信息,点击确定按钮关闭弹窗将获取到的信息填入表单2.在表单已有经纬度数据时点击按钮地图根据经纬度信息回显标记到相应位置效果如图:地图搜索选点点击确定将信息填入表单step1.安装 npm install --save vue-amapstep2.main.js中引入配置// 全局组件高德
·
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.4
uiVersion: '1.0'
})
setp3.封装vue-amap组件 map.vue
<template>
<div>
<el-dialog
class="container"
append-to-body
title="查看地图"
: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-text
v-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 = this
return {
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.lnglat
vm.dataForm.lon = lng
vm.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)
vm.dataForm.orgAddr = result.regeocode.formattedAddress
vm.dataForm.province = result.regeocode.addressComponent.province
vm.dataForm.city = result.regeocode.addressComponent.city
vm.dataForm.district = result.regeocode.addressComponent.district
vm.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 = this
vm.amap.markers = []
let latSum = 0
let lngSum = 0
if (pois.length > 0) {
pois.forEach((poi, index) => {
const { lng, lat } = poi
if (index === 0) {
lngSum = lng
latSum = lat
const obj = {
position: [poi.lng, poi.lat],
text: poi.name,
offset: [0, 30]
}
vm.amap.markers.push(obj)
console.log('地图搜索回调', poi)
vm.dataForm.orgAddr = poi.name
vm.dataForm.lat = poi.lat ? poi.lat.toString() : ''
vm.dataForm.lon = poi.lng ? poi.lng.toString() : ''
}
})
vm.amap.center = [lngSum, latSum]
}
},
// 打开弹窗
open(data) {
const vm = this
vm.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 = this
vm.visible = false
vm.dataForm = getFormData()
vm.amap.markers = []
const obj = {
position: [vm.dataForm.lon, vm.dataForm.lat],
text: vm.dataForm.orgAddr,
offset: [0, 30]
}
vm.amap.markers.push(obj)
vm.amap.center = [vm.dataForm.lon, vm.dataForm.lat]
},
// 提交方法
sure() {
const vm = this
this.$emit(
'updateLocation',
vm.dataForm.orgAddr,
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>
更多推荐
已为社区贡献5条内容
所有评论(0)