vue中使用百度地图_vue使用百度地图

vue中使用百度地图

	之前写过一篇vue调用百度地图的文章，但是写得不是很清晰，所以重新整理一篇；
1

申请百度地图ak

	这个我在之前的那篇文章已经讲过，就不再细说，链接如下：
1

vue调用百度地图

初始化地图

引入地图

这里我们之前是直接在html中引用的，现在我们通过异步加载的方式;
先写一个异步加载的方法，参数你可以自己ak是你自己申请的地图ak，你也可以直接写在方法里面，就不用以参数的形式传入；
这里需要注意的是：百度地图有两个初始化对象，一个是BMapGL，另一个是BMap
两者区别：
1、BMapGL初始化的地址中需添加&type=webgl，BMap初化地址中则一定不能添加，即：
BMapGl：https://api.map.baidu.com/api?v=1.0&type=webgl&callback=initBMap&ak=自己的ak
BMap：https://api.map.baidu.com/api?v=2.0&callback=initBMap&ak=自己的ak
2、BMap在使用时，版本需>=2.0，如果使用1.0则会提示版本过低

3、BMapGL比BMap缩放等级更大
更多差异可自行了解

export function BMapLoader(ak) {
  return new Promise((resolve, reject) => {
    if (window.BMapGL) {
      resolve(window.BMapGL)
    } else {
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&callback=initBMap&ak=' + ak
      script.async = true
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initBMap = function () {
      resolve(window.BMapGL)
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

地图展示

新建一个vue页面，代码如下：

<template>
  <div id="allmap" class="allmap" />
</template>
<script>
import { BMapLoader } from '@/utils/mapLoader'
export default {
  name: 'BMap',
  data() {
    return {
      map: null
    }
  },
  created() {
    this.initMap()
  },
  destroyed() {
    this.map.destroy()
  },
  methods: {
    initMap() {
      this.$nextTick(() => {
        BMapLoader('你自己申请的ak').then(BMap => {
          const map = new BMap.Map('allmap', { enableMapClick: false })
          this.map = map
          map.disableKeyboard() // 禁用键盘操作地图
          map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
          // 添加中心点和缩放等级，如果不添加，初始化出来页面为白屏
          const point = new BMap.Point(106.78887812364171, 29.666046706760273)
          map.centerAndZoom(point, 15)
        })
      })
    }
  }
}
</script>

<style>
	.allmap {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

添加数据

添加一个marker点

  methods: {
    initMap() {
      this.$nextTick(() => {
        BMapLoader('你自己申请的ak').then(BMap => {
          const map = new BMap.Map('allmap', { enableMapClick: false })
          this.map = map
          map.disableKeyboard() // 禁用键盘操作地图
          map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
          const point = new BMap.Point(106.78887812364171, 29.666046706760273)
          map.centerAndZoom(point, 15)
          this.addMarker(BMap, map)
        })
      })
    },
    addMarker(BMap, map) {
      const point = new BMap.Point(106.78887812364171, 29.666046706760273)
      map.addOverlay(new BMap.Marker(point))
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

以上就是vue使用百度地图的基础操作