这只一个按钮，可选择并有弹出框的按钮
<div style="display:inline-block;color:#409EFF;cursor:pointer">
<i class="el-icon-location"></i>
<span @click="opensetdi">选择地址</span>
</div>
弹出框展示的方法
opensetdi(){
this.$store.commit('setgdDialogVisible',true);
},
高德地铁弹出框html
<el-dialog title="选取地址" :visible.sync="this.$store.state.gdDialogVisible" :before-close="addressclosedialog" width="30%" center>
<gdmap></gdmap>
<span class="dialog-footer" style="height: 60px;display: block;"></span>
</el-dialog>
弹出框关闭
addressclosedialog(){
this.$store.state.gdDialogVisible=false
},
import gdmap from '../components/Map'
components:{
'gdmap':gdmap
},
vue-amap安装和使用
vue-amap安装和使用文档
npm 安装
npm install vue-amap --save
vue-amap main.js使用
import VueAMap from 'vue-amap'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'b205a764fd89262a00033ccc515f623c',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geocoder','AMap.Geolocation','AMap.MarkerClusterer'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
});
新建组件Map.vue使用
<template>
<div
class="amap-page-container"
style="width: 95%; height:400px;margin:0 auto;margin-bottom:100px"
>
<el-amap-search-box
class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult"
></el-amap-search-box>
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:center="center"
:zoom="zoom"
:plugin="plugin"
:events="events"
class="amap-demo"
></el-amap>
<p>{{ address }}</p>
<p>{{ center }}</p>
<span class="dialog-footer">
<button type="button" class="el-button el-button--default" @click="sendcenaddress(1)">
<span>取 消</span>
</button>
<button
data-v-5d351510
type="button"
class="el-button el-button--primary"
@click="sendcenaddress"
>
<span>确 定</span>
</button>
</span>
</div>
</template>
<script>
import { AMapManager } from 'vue-amap'
let amapManager = new AMapManager()
export default {
data() {
const self = this
return {
searchOption: {
city: '上海',
citylimit: false,
},
lng: '',
lat: '',
address: '',
city: '',
province: '',
granaryCounty: '',
granaryAddress: '',
marker: '',
amapManager,
zoom: 12,
center: [121.59996, 31.197646],
events: {
init: (o) => {
o.getCity((result) => {
})
},
moveend: () => {},
zoomchange: () => {},
click: (e) => {
debugger
self.lng = e.lnglat.lng
self.lat = e.lnglat.lat
self.center = [self.lng, self.lat]
let o = amapManager.getMap()
if (!self.marker) {
self.marker = new AMap.Marker({
position: e.lnglat,
})
self.marker.setMap(o)
}
self.marker.setPosition(e.lnglat)
let geocoder = new AMap.Geocoder({})
geocoder.getAddress(e.lnglat, function (status, result) {
if (status === 'complete' && result.regeocode) {
self.address = result.regeocode.formattedAddress
self.city = result.regeocode.addressComponent.city
self.province = result.regeocode.addressComponent.province
self.granaryCounty = result.regeocode.addressComponent.district
self.granaryAddress = result.regeocode.addressComponent.township
self.$store.commit('setgranaryCity', self.city)
self.$store.commit('setgranaryProvince', self.province)
self.$store.commit('setgranaryCounty', self.granaryCounty)
self.$store.commit('setgranaryAddress', self.granaryAddress)
} else {
log.error('根据经纬度查询地址失败')
}
})
},
},
plugin: [
'ToolBar',
{
pName: 'MapType',
defaultType: 0,
events: {
init(o) {
},
},
},
],
plugin: [
{
pName: 'Geolocation',
events: {
init(o) {
debugger
o.getCurrentPosition((status, result) => {
if (result && result.position) {
debugger
self.lng = result.position.lng
self.lat = result.position.lat
self.address = result.formattedAddress
self.center = [self.lng, self.lat]
self.city = result.addressComponent.city
self.province = result.addressComponent.province
self.granaryCounty = result.addressComponent.district
self.granaryAddress = result.addressComponent.township
self.$store.commit('setgranaryCity', self.city)
self.$store.commit('setgranaryProvince', self.province)
self.$store.commit('setgranaryCounty', self.granaryCounty)
self.$store.commit('setgranaryAddress', self.granaryAddress)
let o = amapManager.getMap()
if (!self.marker) {
self.marker = new AMap.Marker({
position: self.center,
})
self.marker.setMap(o)
}
self.marker.setPosition(self.center)
}
})
},
},
},
],
}
},
methods: {
sendcenaddress(inde) {
debugger
if (inde == 1) {
this.$store.commit('setmapcenter', '')
this.$store.commit('setmapaddress', '')
this.$store.commit('setgdDialogVisible', false)
} else {
this.$store.commit('setmapcenter', this.center)
this.$store.commit('setmapaddress', this.address)
this.$store.commit('setgdDialogVisible', false)
this.$store.commit('setgranaryCity', this.city)
this.$store.commit('setgranaryProvince', this.province)
this.$store.commit('setgranaryCounty', this.granaryCounty)
this.$store.commit('setgranaryAddress', this.granaryAddress)
}
},
onSearchResult(pois) {
debugger
if (pois.length > 0) {
debugger
let { lng, lat, name, location } = pois[0]
let center = [lng, lat]
this.lng = lng
this.lat = lat
this.center = [lng, lat]
let o = amapManager.getMap()
if (!this.marker) {
this.marker = new AMap.Marker({
position: center,
})
this.marker.setMap(o)
}
this.marker.setPosition(center)
let geocoder = new AMap.Geocoder({})
let that = this
geocoder.getAddress(location, function (status, result) {
console.log(status, result)
if (status === 'complete' && result.regeocode) {
that.address = result.regeocode.formattedAddress
that.city = result.regeocode.addressComponent.city
that.province = result.regeocode.addressComponent.province
that.granaryCounty = result.regeocode.addressComponent.district
that.granaryAddress = result.regeocode.addressComponent.township
that.$store.commit('setgranaryCity', self.city)
that.$store.commit('setgranaryProvince', self.province)
that.$store.commit('setgranaryCounty', self.granaryCounty)
that.$store.commit('setgranaryAddress', self.granaryAddress)
} else {
console.log('根据经纬度查询地址失败')
}
})
}
},
},
}
</script>
<style scoped>
.search-box {
position: absolute;
top: 25px;
left: 20px;
}
.amap-page-container {
position: relative;
}
</style>
