vue baidu map之獲取選中點的經緯度
需求:在vue項目中通過點擊按鈕,彈出百度地圖的彈框,用戶選擇地圖上的點或者通過搜索關鍵字選點,點擊確認 關閉彈窗 得到經緯度
效果:
vue baidu map api鏈接 : https://dafrok.github.io/vue-baidu-map/#/zh/index
使用之前需要先申請百度服務密鑰
由於要多次用到地圖選點,故封裝成一個簡單的組件,在需要的地方進行引入,彈窗用的是iview的modal,本例中用的是局部引入vue baidu map
在需要的地方引入組件
eg:
confirmMap中得到回傳數據,當然,可根據實際需要回傳需要的數據,這裏只回傳了經緯度
附:源代碼
<!--
使用說明:
v-on: map-confirm,參數爲array數組,傳遞經緯度值
v-on cancel 取消時發出事件
-->
<template>
<div style="padding-top:50px; border:1px solid red">
<Modal @on-cancel="cancel" v-model="showMapComponent" width="800" :closable="false" :mask-closable="false">
<baidu-map v-bind:style="mapStyle" class="bm-view" ak="你的密鑰"
:center="center"
:zoom="zoom"
:scroll-wheel-zoom="true"
@click="getClickInfo"
@moving="syncCenterAndZoom"
@moveend="syncCenterAndZoom"
@zoomend="syncCenterAndZoom">
<bm-view style="width: 100%; height:500px;"></bm-view>
<bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
</bm-marker>
<bm-control :offset="{width: '10px', height: '10px'}">
<bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
<input type="text" placeholder="請輸入搜索關鍵字" class="serachinput">
</bm-auto-complete>
</bm-control>
<bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
</baidu-map>
<div slot="footer" style="margin-top: 0px;">
<Button @click="cancel" type="ghost"
style="width: 60px;height: 36px;">取消
</Button>
<Button type="primary" style="width: 60px;height: 36px;" @click="confirm">確定</Button>
</div>
</Modal>
</div>
</template>
<script>
import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from 'vue-baidu-map'
export default {
components: {
BaiduMap,
BmControl,
BmView,
BmAutoComplete,
BmLocalSearch,
BmMarker
},
data: function () {
return {
showMapComponent: this.value,
keyword: '',
mapStyle: {
width: '100%',
height: this.mapHeight + 'px'
},
center: {lng: 116.404, lat: 39.915},
zoom: 15
}
},
watch: {
value: function (currentValue) {
this.showMapComponent = currentValue
if (currentValue) {
this.keyword = ''
}
}
},
props: {
value: Boolean,
mapHeight: {
type: Number,
default: 500
}
},
methods: {
/***
* 地圖點擊事件。
*/
getClickInfo (e) {
this.center.lng = e.point.lng
this.center.lat = e.point.lat
},
syncCenterAndZoom (e) {
const {lng, lat} = e.target.getCenter()
this.center.lng = lng
this.center.lat = lat
this.zoom = e.target.getZoom()
},
/***
* 確認
*/
confirm: function () {
this.showMapComponent = false
this.$emit('map-confirm', this.center)
},
/***
* 取消
*/
cancel: function () {
this.showMapComponent = false
this.$emit('cancel', this.showMapComponent)
}
}
}
</script>
<style scoped>
.serachinput{
width: 300px;
box-sizing: border-box;
padding: 9px;
border: 1px solid #dddee1;
line-height: 20px;
font-size: 16px;
height: 38px;
color: #333;
position: relative;
border-radius: 4px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;
}
</style>