vue 百度地图 使用 vue-baidu-map 进行当前位置定位和范围展示

<template>
  <baidu-map class="map" :center="center" :zoom="zoom">
    <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
    <bm-circle :center="center" :radius="radius" :stroke-color="color" :fill-color="color" :stroke-weight="weight" :editing="false"></bm-circle>
  </baidu-map>
</template>
 
<script>
import { BaiduMap, BmLocalSearch, BmCircle } from 'vue-baidu-map'
 
export default {
  components: {
    BaiduMap,
    BmLocalSearch,
    BmCircle
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 15,
      keyword: '',
      location: '',
      radius: 1000, // 半径，单位为米
      color: 'red',
      weight: 2
    }
  },
  mounted() {
    this.getCurrentLocation()
  },
  methods: {
    getCurrentLocation() {
      // 获取当前位置
      navigator.geolocation.getCurrentPosition(
        position => {
          this.center.lng = position.coords.longitude
          this.center.lat = position.coords.latitude
          this.location = `${this.center.lng},${this.center.lat}`
        },
        error => {
          console.error(error)
        }
      )
    }
  }
}
</script>
 
<style>
.map {
  width: 100%;
  height: 500px;
}
</style>

这个代码示例展示了如何在Vue应用中使用vue-baidu-map插件来创建一个展示当前位置和一个指定半径范围的地图。代码首先定义了组件，然后在mounted生命周期钩子中获取当前位置，并在地图上设置中心点和范围。同时，使用BmLocalSearch组件进行关键字搜索。