vue 百度地图获取经纬度和地址插件

最新推荐文章于 2024-09-06 16:12:22 发布

自由的音符

最新推荐文章于 2024-09-06 16:12:22 发布

阅读量598

点赞数

分类专栏：地图 Vue 文章标签： vue.js 百度 javascript

原文链接：https://blog.csdn.net/u013361179/article/details/108598717?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_aggregation-2-108598717.pc_agg_rank_aggregation&utm_term=vue%E7%82%B9%E5%87%BB%E5%9C%B0%E5%9B%

版权

Vue 同时被 2 个专栏收录

48 篇文章 5 订阅

订阅专栏

地图

1 篇文章 0 订阅

订阅专栏

1、先看效果图

在这里插入图片描述

2、代码实现（组件）

npm install --save vue-baidu-map
2-1、compons文件夹下新建baiduMap.vue,内容：

<template>
  <div>
    <el-dialog
      width="30%"
      :before-close="cancel"
      :closable="false"
      :mask-closable="false"
      :visible="visible"
    >
      <span>
        <baidu-map
          v-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 }">
              <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
      ></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.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.$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
}