![cover](https://img-blog.csdnimg.cn/1a4b9e9c19dd48bb89c91c8321c0831d.png#pic_center)
vue中使用百度地图
v=1.0&type=webgl&callback=initBMap&ak=自己的ak。v=2.0&callback=initBMap&ak=自己的ak。是你自己申请的地图ak,你也可以直接写在方法里面,就不用以参数的形式传入;这里我们之前是直接在html中引用的,现在我们通过异步加载的方式;这里需要注意的是:百度地图有两个初始华对象,一个是。
·
vue中使用百度地图
之前写过一篇vue调用百度地图的文章,但是写得不是很清晰,所以重新整理一篇;
申请百度地图ak
这个我在之前的那篇文章已经讲过,就不再细说,链接如下:
初始化地图
引入地图
这里我们之前是直接在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)
}
})
}
地图展示
新建一个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>
添加数据
添加一个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))
}
}
}
以上就是vue使用百度地图的基础操作
更多推荐
所有评论(0)