Use Baidu map component in vue environment

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

After npm installation

npm i --save vue-baidu-map

Import can be used

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

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

The problem is that it has not been updated for a long time, and it is very convenient to use it simply.

2. Directly import through javascript

1. Introduce in 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>

Except for the first one above, the others are third-party plug-ins of Baidu Maps. The plug-ins are imported according to their own needs.

2. Add the externals part in vue.config.js

  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 on the specific map page

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

4. Place a div on the page

<div id="allmap" />

5. Instantiate the map component

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

6. Just make the corresponding call according to the official API, such as setting the map center point:

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

7. Use the same way for third-party plug-ins,
such as using aggregation points

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

   this.markerClusterer.addMarkers(markers)

Note that the above variable is with tihs. It is just because it is initialized in the data() of the page export, for global call. Actually just a js object, just use it normally

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

Use Baidu map component in vue environment

Guess you like