vue中使用百度地图

vue中使用百度地图

安装

npm

npm install vue-baidu-map –save

CDN

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

使用

全局注册

全局注册将一次性引入百度地图组件库的所有组件

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>
<baidu-map class="bm-view">
</baidu-map>
</template>

<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>

局部注册

如果有按需引入组件的需要，可以选择局部注册百度地图组件，这将减少工程打包后的容量尺寸。局部注册的 BaiduMap 组件必须声明 ak 属性。

<template>
<baidu-map class="bm-view" ak="YOUR_APP_KEY">
</baidu-map>
</template>

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

<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>

CDN全局注册

<script>
Vue.use(VueBaiduMap.default, {
ak: 'YOUR_APP_KEY'
})
</script>

常见问题

BaiduMap

组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。

由于百度地图 JS API 只有 JSONP 一种加载方式，因此

BaiduMap

组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用

BMap

类，更不要在这些时机修改 model 层。

错误使用

<template>
<baidu-map :center="center"></baidu-map>
</template>
<script>
export default {
data () {
return {
center: {lng: 0, lat: 0}
}
},
mounted () {
this.lng = 116.404
this.lat = 39.915
}
}
</script>

正确使用

<template>
<baidu-map :center="center" @ready="handler"></baidu-map>
</template>
<script>
export default {
data ()
4000
{
return {
center: {lng: 0, lat: 0}
}
},
methods: {
handler ({BMap, map}) {
console.log(BMap, map)
this.center.lng = 116.404
this.center.lat = 39.915
}
}
}
</script>

以上是基础用法，想了解更多详细用法以及更多API

飞机票：https://dafrok.github.io/vue-baidu-map/#/