vue百度地图使用

最近做一个项目，里面需要使用到地图然后圈一个范围并且获取这个范围的经纬度，刚开始使用的是高德，后面由于别的原因换成了百度，就先浅浅记录一下吧

安装：npm install vue-baidu-map --save

引入：

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {

ak: '自己的api密钥'

})

页面：

<template>

 <baidu-map

          ref="bmap"

          :center="circlePath.center"

          :zoom="zoom"

          style="height: 550px; width: 860px"

          @ready="mapReady"

          :ak="yourBaiduMapApiKey"

        >

          <!-- 距离 -->

          <el-select

            class="mapselet"

            style="height: 46px"

            v-model="mapValue"

            placeholder="请选择"

            @change="mapRange"

            filterable

          >

            <el-option

              style="width: 170px"

              v-for="item in maplist"

              :key="item.value"

              :label="item.label"

              :value="item"

            >

            </el-option>

          </el-select>

          <!-- 定位控件   anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角 -->

          <bm-geolocation

            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"

            :showAddressBar="true"

            :autoLocation="true"

          ></bm-geolocation>

          <!-- 地区检索  keyword：关键字搜索   @searchcomplete：检索完成后的回调函数   auto-viewport：检索结束后是否自动调整地图事业  -->

          <input

            class="baidu-search"

            type="text"

            v-model="searchKeyword"

            placeholder="请输入搜索关键字"

            @keyup.enter="searchLocation"

          />

          <div class="map-list-op" v-if="baiduVisted == true">

            <div

              class="baidu-search-option"

              v-for="(item, index) in baiduMapList"

              :key="index"

              @click="addresCommit(item)"

            >

              <span>

                {{ item.title }}

              </span>

              <span class="baidu-address">({{ item.address }})</span>

            </div>

          </div>

          <!-- 缩放控件   anchor代表控件停靠位置   anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角-->

          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

          <!-- 圆形覆盖 -->

          <bm-circle

            :center="circlePath.center"

            :radius="circlePath.radius"

            stroke-color="transparent"

            :stroke-opacity="0.5"

            fillColor="#00B782"

            :fillOpacity="0.5"

          ></bm-circle>

          <!-- 在此处添加其他地图相关的组件和功能 -->

        </baidu-map>

</template>

data(){

return{

circlePath: {

        center: {

          lng: 103.931915,

          lat: 30.787096,

        },

        radius: 300,

      },

      yourBaiduMapApiKey: "Z40LBSsIkfMGMCHalUiiq7k6PE4eQno7",

      zoom: 15,

      searchKeyword: "", //搜索关键字

      searchResults: [],

      baiduMapList: [], //地图搜索后的地址

      mapInstance: null, // 添加一个标志位来跟踪地图是否已准备好

      baiduVisted: false, //地图搜索内容显示与否

      //radius: 500, //圆形半径

      //检索关键字

      //默认选中

      mapValue: {

        value: "3",

        label: "100米",

      },

  }

},

mounted(){

 mapReady({ BMap, map }) {

      //保存this指向，因为在百度的回调中this不指向vue

      const _this = this;

      this.mapInstance = map;

      // 获取自动定位方法

      var geolocation = new BMap.Geolocation();

      this.mapInstance = map;

      // 获取自动定位获取的坐标信息

      geolocation.getCurrentPosition(

        function (r) {

          //可以conso.log看一下这个r，他里面包含了检索到的位置信息。下面就把两个维度信息赋值给center来定位

          _this.center = {

            lng: r.point.lng,

            lat: r.point.lat,

          };

        },

        //启用高精度

        { enableHighAccuracy: true }

      );

    },

    searchLocation() {

      // 创建 LocalSearch 实例

      if (this.mapInstance) {

        // const mapInstance = this.$refs.bmap.getMap();

        var localSearch = new BMap.LocalSearch(this.mapInstance, {

          renderOptions: { map: this.mapInstance },

        });

        // 指定搜索关键字和回调函数

        localSearch.search(this.searchKeyword);

        localSearch.setSearchCompleteCallback((results) => {

          // 处理搜索结果

          if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {

            // 将搜索结果保存到 data 中

            this.baiduMapList = results.Yr;

            console.log("kjshd", this.baiduMapList);

            this.baiduVisted = true;

            this.searchResults = results.getPoi(0, 10);

          }

        });

      }

    },

    addresCommit(item) {

      console.log("itemn", item);

      this.circlePath.center.lng = item.marker.point.lng;

      this.circlePath.center.lat = item.marker.point.lat;

      this.searchKeyword = item.title;

      this.zoom = 16;

      this.mapcen = item;

      this.baiduVisted = false;

    },

 // 地图范围

    mapRange(cc) {

      this.circlePath.radius = parseInt(cc.label);

    },

    //获取圆形经纬度范围

    mapSta() {

      // 地球半径（单位：米）

      let R = 6371000;

      // 中心点的经纬度

      let centerLat = this.circlePath.center.lat;

      let centerLng = this.circlePath.center.lng;

      // 固定半径大小

      let radius = this.circlePath.radius || parseInt(this.mapValue.label);

      // 计算每一度的弧长（单位：米）

      let degree = (2 * Math.PI * R) / 360;

      // 计算纬度半径度数

      let latR = radius / degree;

      // 计算经度半径度数

      let lngR = radius / (degree * Math.cos((Math.PI / 180) * centerLat));

      // 计算正方形四个顶点的经纬度坐标

      let topLeftLat = centerLat + latR;

      let topLeftLng = centerLng - lngR;

      let bottomRightLat = centerLat - latR;

      let bottomRightLng = centerLng + lngR;

      // 定义插值点数

      let pointsCount = 30;

      // 计算正方形顶点间距离

      let dLat = (topLeftLat - bottomRightLat) / (pointsCount - 1);

      let dLng = (bottomRightLng - topLeftLng) / (pointsCount - 1);

      let lat = "";

      let lng = "";

      let arr = [];

      // 插值计算经纬度坐标

      for (var i = 0; i < pointsCount; i++) {

        lat = topLeftLat - i * dLat;

        for (var j = 0; j < pointsCount; j++) {

          lng = topLeftLng + j * dLng;

          // 这里的(lat,lng)即为圆形围栏周边的经纬度点

          // console.log(lat, lng);

          let an = {

            lat,

            lng,

          };

          arr.push(an);

        }

      }

      return arr;

    },

}