vue-baidu-map百度地图组件指南

vue-baidu-map 百度地图组件指南 vue-baidu-map 是一个基于 Vue.js 的 百度地图组件库，提供了便捷的方式来在 Vue 项目中集成百度地图。下面是该组件库的使用指南。 安装 使用 npm 安装 vue-baidu-map 组件库： `npm install vue-baidu-map --save` 或者使用 CDN 链接： `<script src="https://unpkg.com/vue-baidu-map"></script>` 全局注册 将 vue-baidu-map 组件库全局注册到 Vue 实例中： ```javascript import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'YOUR_APP_KEY' }) ``` 局部注册 如果需要按需引入组件，可以选择局部注册百度地图组件，这将减少工程打包后的容量尺寸。 ```javascript import BaiduMap from 'vue-baidu-map/components/map/Map.vue' export default { components: { BaiduMap } } ``` 组件使用 使用 baidu-map 组件： ```html <template> <baidu-map class="bm-view" :center="center" :zoom="zoom"></baidu-map> </template> <script> export default { data() { return { center: { lng: 0, lat: 0 }, zoom: 3 } } } </script> <style> .bm-view { width: 100%; height: 300px; } </style> ``` 常见问题 1. BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。 2. 没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当 center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。 3. 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。 正确使用方式 正确使用 BaiduMap 组件的示例代码： ```html <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> ``` Hello World 使用 vue-baidu-map 创建一个简单的百度地图示例： ```html <template> <baidu-map class="map" center="北京"></baidu-map> </template> <style> .map { width: 100%; height: 300px; } </style> ``` vue-baidu-map 是一个功能强大且灵活的百度地图组件库，可以帮助开发者快速集成百度地图到 Vue 项目中。