Vue使用百度地图

Vue使用百度地图

1、获取AK值

百度地图开发者平台：百度地图开发者平台官网
首先登录官网，可使用百度账号直接登录

然后点击控制台

然后点击我的应用=>创建应用

输入应用名称，选中应用类型以及需要使用的API即可；下面的白名单可以设置未"*"，允许所有网址直接访问，或者设置为自己的网站名
因为要使用Vue整合百度地图在前端展示，所以我这里选择的是浏览器端

创建完成以后我们就可以得到一个AK值

2、Vue单页面应用安装Vue Baidu Map

Vue Baidu Map官方网站：vue-baidu-map官网
安装方法：
通过npm install直接安装：
首先进入项目地址，然后在终端中输入以下命令（我是直接在vscode中打开项目进行的安装）：

npm install vue-baidu-map --save

通过CDN方式导入：
这种方式我暂时还没有用过

<script src="https://unpkg.com/vue-baidu-map"></script>

3、全局注册or局部注册

因为我这里只有一个页面用到了百度地图，所以我这里选择的是局部注册，当然全局注册更为方便，接下来两种方法我都会介绍到。
全局注册：
在main.js中一次性引入百度地图的全部模块

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

局部注册：
直接在需要使用百度地图的组件内引入相关的组件即可使用。

<template>
  <div>
    <baidu-map class="bm-view" ak='tQkYwG4oSbxkVV4fHlozuyKWNqESynxz' :scroll-wheel-zoom="true"></baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map'
export default {
  components: {
    BaiduMap: BaiduMap
  }
}
</script>

<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 675px;
}
</style>

4、实现的效果

5、添加定位、城市、缩放插件

<template>
  <div>
    <baidu-map class="bm-view" ak='tQkYwG4oSbxkVV4fHlozuyKWNqESynxz' center="濮阳市南乐县" :scroll-wheel-zoom="true">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-marker :position="{lng: 115.1249531400, lat: 36.0445506400}" :dragging="true" @click="infoWindowOpen">
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">
          劳动力人数:300;<br/>年龄分布:;<br/>工资分布:;<br/>工作种类分布:;<br/>跨省跨地区流动工作人数:<br/>
          </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation'
import BmCityList from 'vue-baidu-map/components/controls/CityList'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

export default {
  data () {
    return {
      show: false
    }
  },
  components: {
    BaiduMap: BaiduMap,
    BmNavigation: BmNavigation,
    BmGeolocation: BmGeolocation,
    BmCityList: BmCityList,
    BmMarker: BmMarker,
    BmInfoWindow: BmInfoWindow
  },
  methods: {
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 675px;
}
</style>

实现的具体效果如下图：

6、问题

百度地图的定位功能偏差较大，不知如何获得精准定位，后续如果解决会继续更新。

7.参考

参考博客：
https://www.cnblogs.com/Marco-hui/p/12155995.html