最近接到一个新需要，要求如下：
当我点击选择地址时，弹出百度地图，
效果如下图：
实现方法：
1、首先要在百度地图开放平台去申请一个账号和key
2、申请好之后，在项目的index.html中引入
3、我写了一个组件，方便项目中任何地方可以调用：
这里一定要设置一个宽高，容器才能更好的适应，不然显示出来达不到想要的效果，如果没有设置高度还可能显示不出来
4、接下来就是开始初始化地图设置了，我的是在弹窗里面用，所有我写在watch里面的，当监测到弹窗打开时即开始初始化地图页面
5、具体方法如下：
直接附上源码：
<template lang="html">
<el-dialog v-dialogDrag title="选择地点" append-to-body width="800px" :visible.sync="mvisible" :close-on-click-modal="false"
@close="cancel"
>
<div id="amap-container">
<el-row>
<el-col :span="14">
<formatForm ref="basicInfoForm" class="basicForm" :form-list="basicInfoList" :form-validate="basicFormValidate" />
</el-col>
<el-col :span="10">
<el-input
id="search-input"
v-model="searchValue"
class="input-with"
placeholder="请输入详细地址"
clearable
@clear="handelclearInput"
@keyup.native.enter="onhandelSearch"
>
<el-button
slot="append"
size="small"
type="primary"
icon="el-icon-search"
@click="onhandelSearch"
>搜索
</el-button>
</el-input>
</el-col>
</el-row>
<el-row class="margin-top-10 address">
当前地址是： {{ addressName }}{{ searchValue }}
</el-row>
<div id="mapBox" />
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handelSave">保 存</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { cleanChildrenEmpty } from '@/utils/filterArrayData'
import { getAddressName } from '@/utils/getAddressName'
import { selectRequired } from '@/utils/formRules'
// import AMapLoader from '@amap/amap-jsapi-loader'
import region from '@/static/json/region.json'
import formatForm from '@/components/formatForm/index'
// import { BMap } from 'vue-baidu-map/types'
// const BMapGL = require('vue-baidu-map/types/map')
let BMapGL = {}
let map = {}
const addressOption = cleanChildrenEmpty(region, 'children')
export default {
name: 'AMap',
components: { formatForm },
props: {
businessProvinceId: {
type: Array,
default: () => []
},
defaultValue: {
type: String,
default: ''
},
visible: {
type: Boolean,
default: false
}
},
data() {
const that = this
return {
mvisible: false,
defaultCity: '',
// 地址对应的经纬度信息
lat: '',
lng: '',
// 检索关键字
searchValue: '',
// 地址名称
adcode: '',
basicInfoList: {
span: 24,
title: '',
labelWidth: '70px',
isColon: true,
list: [
{
type: 'cascader',
exist: true,
fieldName: '省市区',
fieldEName: 'businessProvinceId',
expandTrigger: 'hover',
label: 'name',
value: 'id',
placeholder: '请选择省市区',
options: addressOption,
rules: [selectRequired],
change: res => {
this.addressName = res.length ? getAddressName(res, addressOption).name : ''
this.onhandelSearch()
}
}
]
},
basicFormValidate: {
businessProvinceId: []
},
addressName: '',
district: '',
newDistrict: ''
}
},
watch: {
defaultValue() {
this.searchValue = this.defaultValue
},
visible() {
this.mvisible = this.visible
this.searchValue = this.defaultValue
console.log(this.businessProvinceId.length, this.defaultValue)
this.basicFormValidate.businessProvinceId = this.businessProvinceId || []
this.addressName = this.businessProvinceId.length && !this.defaultValue ? getAddressName(this.businessProvinceId, addressOption).name : ''
const oldDistrict = this.businessProvinceId.length && !this.defaultValue ? (getAddressName(this.businessProvinceId, addressOption).name2).split('-') : []
this.district = oldDistrict.length ? oldDistrict[oldDistrict.length - 1] : ''
this.$nextTick(() => {
// 初始化地图页面
this.initMap()
})
}
},
beforeDestroy() {
// 销毁地图
// this.map.destroy()
},
methods: {
initMap() {
BMapGL = window.BMapGL
map = new BMapGL.Map('mapBox') // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
console.log('this.addressName', this.addressName)
const center = this.addressName
map.setCenter(center)
this.getPoint()
this.getClickMapIp()
// // 添加maker
// this.setMaker()
// // 添加鼠标点选地图选择地址
// this.addAmapGeocoder()
// this.onhandelSearch()
},
getPoint() {
const center = this.addressName || this.searchValue
const myGeo = new BMapGL.Geocoder()
myGeo.getPoint(center, (point) => {
if (point) {
map.centerAndZoom(point, 12)
map.addOverlay(new BMapGL.Marker(point, { title: center }))
} else {
alert('您选择的地址没有解析到结果！')
}
}, this.addressName)
},
getClickMapIp() {
map.addEventListener('click', (e) => {
console.log('e----', e)
this.lat = e.latlng.lat
this.lng = e.latlng.lng
const point = new BMapGL.Point(this.lng, this.lat)
map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别
this.setMarker(point)
// 指定经纬度获取地址
this.getLocation(point)
})
},
// 添加marker
setMarker(new_point) {
map.clearOverlays()
const marker = new BMapGL.Marker(new_point)
map.addOverlay(marker) // 将标注添加到地图中
map.panTo(new_point)
},
// 获取地址
getLocation(pt) {
// 创建地理编码实例
const myGeo = new BMapGL.Geocoder()
console.log('myGeo', myGeo)
myGeo.getLocation(pt, (re) => {
const { province, city, district, street, streetNumber } = re.addressComponents || {}
this.newDistrict = district
this.addressName = `${province || ''}${city || ''}${district || ''}`
this.searchValue = `${street || ''}${streetNumber || ''}`
console.log('getLocation', re)
// this.getCityCode(district)
})
},
getCityCode(city) {
console.log('city', city)
const myCity = new BMapGL.Geolocation()
console.log('myCity', myCity)
myCity.getCityCode(city, res => {
console.log('getCurrentPosition======', res)
})
},
// 按钮触发检索
onhandelSearch() {
const local = new BMapGL.LocalSearch(map, {
renderOptions: { map: map }
})
const address = this.addressName + this.searchValue
local.search(address)
},
handelclearInput() {
this.searchValue = ''
},
// 保存当前选择的地址,分发事件
handelSave() {
const { newDistrict, district, lat, lng } = this
const { businessProvinceId } = this.basicFormValidate
console.log('businessProvinceId', businessProvinceId)
const s = district ? district === newDistrict : true
if (businessProvinceId.length === 3 && lat && lng && s) {
const x_pi = 3.14159265358979324 * 3000.0 / 180.0
const x = lng - 0.0065
const y = lat - 0.006
const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
const lngs = z * Math.cos(theta)
const lats = z * Math.sin(theta)
const data = {
name: this.name,
businessProvinceId,
// 地址名称
address: this.formattedAddress,
// 纬度lat
lat: lats,
// 经度lng
lng: lngs
}
this.$emit('getPosition', true, data)
} else {
this.$message.error('当前地址不在省市区范围内，请重新选择')
}
},
cancel() {
this.$emit('getPosition', false)
}
}
}
</script>
<style scoped lang="scss">
#amap-container {
margin: 20px;
.el-input__clear {
line-height: 34px;
/*top: 20px;*/
}
#mapBox {
height: 35vh;
width: 100%;
margin-top: 10px;
border: 1px solid #ccc;
}
.input-with {
/*position: fixed;*/
/*top: 40px;*/
z-index: 1;
width: 580px;
}
.address {
color: #373737;
}
}
.amap-sug-result {
z-index: 99999;
}
.baseForm.format_form {
margin: 0 !important;
}
</style>
根据项目需求做调整即可。
好了就这样吧，助人达已，爱分享爱学习，做一个快乐的前端小姐姐
如有更好的方法，欢迎交流！！
