vue + ElementUI + BMap 百度地图实现地图选址定位并获取地址信息
vue组件中引入百度地图的使用目标:实现页面定位选址效果:1、安装BMapnpm install vue-baidu-map --save2、main.js中全局引用import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: 'your apikey'})3、页面组件中HTML:<el-dialogtitle="地图":visible
·
API相关说明:
var geolocation = new BMap.Geolocation()
:地图获取地理位置
var geoc = new BMap.Geocoder()
:地址解析对象
var marker = new BMap.Marker(point)
:创建标注
实例
vue组件中引入百度地图的使用
目标:实现页面定位选址
效果:
1、安装BMap
npm install vue-baidu-map --save
2、main.js中全局引用
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'your apikey'
})
3、页面组件中
HTML:
<el-dialog
title="地图"
:visible.sync="showMap"
width="70%"
:append-to-body="true"
@closed="closeMap"
style="height: 600px; overflow: hidden;"
:close-on-click-modal="false" :close-on-press-escape="false"
>
<el-input class="addressInput" v-model="addressKeyword" placeholder="请输入地址来查找相关位置"></el-input>
<div class="control-btn">
<el-button type="primary" @click="checkedAddress">确 定</el-button>
<el-button @click="closeMap">关 闭</el-button>
</div>
<baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true' v-loading='loadingMap'>
<bm-view style="width: 100%; height:500px; flex: 1"></bm-view>
<bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
</baidu-map>
</el-dialog>
JS:
data () {
// 地图相关
loadingMap: true,
BMap: '',
map: '',
geoc: '',
showMap: false,
addressKeyword: '',
pointLngLat: '',
center: { lng: 109.45744048529967, lat: 36.49771311230842 },
zoom: 13
},
// 地图初始化
handler ({BMap, map}) {
this.mapOpen()
this.BMap = BMap
this.map = map
this.loadingMap = true
var geolocation = new BMap.Geolocation()
this.geoc = new BMap.Geocoder() // 地址解析对象
var $this = this
// 调用百度地图api 中的获取当前位置接口
geolocation.getCurrentPosition(function (r) {
let myGeo = new BMap.Geocoder()
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
if (result) {
$this.loadingMap = false
console.log(result)
$this.$set($this, 'pointLngLat', {lng: result.point.lng, lat: result.point.lat})
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
$this.addPoint({BMap, map})
}
})
})
},
// 添加点位
addPoint ({BMap, map}) {
map.clearOverlays()
var point = new BMap.Point(this.pointLngLat.lng, this.pointLngLat.lat)
let zoom = map.getZoom()
console.log('zoom:' + zoom)
setTimeout(() => {
map.centerAndZoom(point, zoom)
}, 0)
var marker = new BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
},
// 点击地图
getClickInfo (e) {
console.log(e)
this.center = {lng: e.point.lng, lat: e.point.lat}
this.pointLngLat = {lng: e.point.lng, lat: e.point.lat}
// 获取点位信息
let $this = this
this.geoc.getLocation(e.point, function (rs) {
var addComp = rs.addressComponents
$this.pointAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
console.log($this.pointAddress)
})
}
注意:
当点击地图打点时,会发生偏移,解决代码如下:
// 地图相关
mapOpen () {
this.top = this.getScrollTop()
if (this.top) {
this.setScrollTop(0)
}
},
// 关闭地图后调用
mapClose () {
this.setScrollTop(this.top)
this.top = 0
this.showMap = false
},
getScrollTop () {
let scrollTop = 0
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else if (document.body) {
scrollTop = document.body.scrollTop
}
return scrollTop
},
setScrollTop (top) {
if (!isNaN(top)) {
if (document.documentElement && document.documentElement.scrollTop !== undefined) {
document.documentElement.scrollTop = top
} else if (document.body) {
document.body.scrollTop = top
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)