1、先看效果图
点击"地图获取"按钮打开地图弹框，然后可以搜索也可以手动定位，点击“确定”按钮，input框自动填写经纬度
2、代码实现（组件）
2-1、compons文件夹下新建baiduMap.vue,内容：
<template><div><el-dialogwidth="30%":before-close="cancel":closable="false":mask-closable="false":visible="visible"><span><baidu-mapv-bind:style="mapStyle"class="bm-view"ak="G1i75yz8WZEz871mIscsk4NTplkSakWB":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 }"><inputtype="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></span><span slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="confirm">确 定</el-button></span></el-dialog></div></template><script>import {BaiduMap,BmControl,BmView,BmAutoComplete,BmLocalSearch,BmMarker} from 'vue-baidu-map'export default {components: {BaiduMap,BmControl,BmView,BmAutoComplete,BmLocalSearch,BmMarker},data () {return {showMapComponent: this.value,keyword: '',mapStyle: {width: '100%',height: this.mapHeight + 'px'},center: {lng: 104.710326, lat: 27.118777 },zoom: 15}},props: {visible: Boolean,value: {type: Boolean,default: false},mapHeight: {type: Number,default: 500}},created () {},watch: {// value: function (currentValue) {// this.showMapComponent = currentValue// if (currentValue) {//this.keyword = ''// }// }},methods: {/**** 地图点击事件。*/getClickInfo (e) {this.center.lng = e.point.lngthis.center.lat = e.point.lat},syncCenterAndZoom (e) {const {lng, lat } = e.target.getCenter()this.center.lng = lngthis.center.lat = latthis.zoom = e.target.getZoom()},/**** 确认*/confirm: function () {this.$emit('map-confirm', this.center)},/**** 取消*/cancel: function () {this.$emit('cancel')}}}</script><style lang="scss" 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>
2-2、页面引入并注册组件
<script>import baiduMap from '../../components/baiduMap'export default {components: {baiduMap },data () {return {showMapComponent: false}}},</script>
2-3、页面书写
<template><div><baiduMap@cancel="cancelMap"@map-confirm="confirmMap":visible="showMapComponent"></baiduMap></div></template>
2-4、方法
cancelMap () {this.showMapComponent = !this.showMapComponent},confirmMap (e) {console.log(e)// const obj = { 经度: e.lng, 纬度: e.lat }// const arr = []// for (var k in obj) {// const str = k + ':' + obj[k]// arr.push(str)// }// this.form.longitudeLatitude = arr.join(',')// this.form.longitude = e.lng + ''// this.form.dimension = e.lat + ''this.showMapComponent = !this.showMapComponent}
腾讯地图获取经纬度地址：/u013361179/article/details/110074947
