百度地图 -＞选点,地址搜索,坐标逆解析

1. 安装 百度依赖

npm install vue-baidu-map -S

2. 引入与注册

将下方 BaiduMapPoint 压缩包解压放到 /src/components 目录下

import BaiduMapPoint from '@/components/BaiduMapPoint'
Vue.component('BaiduMapPoint', BaiduMapPoint)

3. ak 秘钥写在组件中，自行酌情更换

// 百度地图的key
const ak = 'UmeYALQE9awE98LBNtNivQfr8hEoNP7W'

4. demo 使用

注：一定要给放地图的容器一个高度

<template>
  <div style="height: 500px">
    <BaiduMapPoint :lng="lng" :lat="lat" @complete="complete"></BaiduMapPoint>
  </div>
</template>

<script>
import BaiduMapPoint from '@/components/BaiduMapPoint'
export default {
  name: 'BaiduMapView',
  components: {
    BaiduMapPoint,
  },
  data() {
    return {
      lng: 119.237373, // 经度
      lat: 34.611121, // 纬度
    }
  },
  methods: {
    complete(e) {
      console.log('点位信息: ', e)
    },
  },
}
</script>

5. 组件介绍

❤️ 组件接收的 属性

props: {
  // 经度
  lng: { type: Number, default: 0 },
  // 纬度
  lat: { type: Number, default: 0 },
  // 是否禁用 仅展示点位
  disabled: { type: Boolean, default: false },
  // 是否显示版权
  isCopyRight: { type: Boolean },
},

❤️❤️ 组件监听的 事件有

methods: {
  complete(e) {
    console.log('点位信息: ', e)
  },
},