vue环境下使用百度地图组件

一、使用vue-baidu-map
https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

npm安装后

npm i --save vue-baidu-map

import即可使用

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

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

问题是已经很久没有更新了，简单的使用还是很方便的

二、通过javascript直接引入

1、在index.html中引入

    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak= 你的key" ></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的key"></script>

上面除了第一个，其他的都是百度地图的第三方插件，关于插件根据自己需求导入

 

2、在vue.config.js中添加externals的部分

  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    externals: {
      'BaiduMap': 'BMap',
      'BMapLib': 'BMapLib'
    },
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

3、在具体使用地图的页面import

import BaiduMap from 'BaiduMap'
import BMapLib from 'BMapLib'

4、页面中放置一个div

<div id="allmap" />

5、实例化地图组件

this.map = new BaiduMap.Map('allmap') // 创建地图实例

6、按照官方API做相应调用即可,比如设置地图中心点：

this.map.centerAndZoom(new BaiduMap.Point(this.center.lng, this.center.lat), this.zoom) // 初始化地图，设置中心点坐标和地图级别

7、第三方插件使用方式同理
比如使用聚合点

   this.markerClusterer = new BMapLib.MarkerClusterer(this.map, { markers: null })

   this.markerClusterer.addMarkers(markers)

注意上面的变量带tihs.只是因为在页面export的data()中初始化了，为了全局调用。实际只是一个js对象，正常使用即可

export default {
  data() {
    return {
    }
    }
}