VUE使⽤【⾼德地图】vue-amap⾃定义封装组件带搜索功能及回显标记功能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"/>//搜索框
imerj
<el-amap class="amap-box":zoom="":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=""
:offset="marker.offset"
:position="marker.position"
/>
保健牙膏</el-amap>
</div>
</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({
lncrna引物设计radius:1000,
extensions:'all'
})
if(status ==='complete'&& result.info ==='OK'){
if(result && ode){
// console.log('点击获取地址的数据', result)
Addr = ode.formattedAddress
vm.dataForm.province = ode.addressComponent.province vm.dataForm.city = ode.addressComponent.city
vm.dataForm.district = ode.addressComponent.district
vm.dataForm.lat = lat ? String():''
vm.dataForm.lon = lng ? String():''
vm.amap.markers =[]
const obj ={
position:[lng, lat],
text: ode.formattedAddress,
offset:[0,30]
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)
Addr = poi.name
vm.dataForm.lat = poi.lat ? String():''
vm.dataForm.lon = poi.lng ? String():''
}
})
=[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]
}
]
=[116.319802,39.98294]
}else{
//通过已有的数据进⾏回显标记
vm.amap.markers =[
{
position:[data.longitude, data.latitude],
position:[data.longitude, data.latitude],
text: data.address,三爪拉马
offset:[0,30]防辐射面罩
}
]
=[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: Addr,
offset:[0,30]
}
vm.amap.markers.push(obj)
=[vm.dataForm.lon, vm.dataForm.lat] },
// 提交⽅法
sure(){
const vm =this
this.$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:07px 7px 0;
border-radius:07px 7px 0;
outline: none;
position: relative;
}
.search-box .el-button {
position: absolute;
right:0;
top:1px;
width:20%;
background: #38a28a;
border-radius:07px 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">
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议