vue项目中使用百度地图功能
1、百度地图api官方文档:https://lbsyun.baidu.com/index.php?title=jspopularGL在百度地区去申请一个百度地图key。这个key属于私密的,部分高级功能需要找百度地图花钱购买。2、在vue项目中,我们使用vue-baidu-map这个封装后的npm包使用方式:npm install vue-baidu-map --save全局注册import Vu
·
1、百度地图api官方文档:
https://lbsyun.baidu.com/index.php?title=jspopularGL
在百度地区去申请一个百度地图key。这个key属于私密的,部分高级功能需要找百度地图花钱购买。
2、在vue项目中,我们使用vue-baidu-map
这个封装后的npm包
使用方式:
npm install vue-baidu-map --save
全局注册
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: '申请的百度key'
})
示例:
<template>
<baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
data () {
return {
center: {lng: 0, lat: 0},
zoom: 3
}
},
methods: {
handler ({BMap, map}) {
console.log(BMap, map)
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 15
}
}
}
</script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
页面显示:
全景功能是后加的。
注意:
- BaiduMap 组件容器本身是一个空的块级元素,如果容器不定义高度,百度地图将渲染在一个高度为 0 不可见的容器内。
- 没有设置center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外,因为百度地图会根据地名自动调整zoom 的值。
- 由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap组件及其所有子组件的渲染只能是异步的。因此,请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码,不要试图在vue 自身的生命周期中调用 BMap 类,更不要在这些时机修改 model 层。
vue-baidu-map中文文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
更多推荐
已为社区贡献28条内容
所有评论(0)