【Vue】集成百度地图

Vue 集成 百度地图

1、获取百度地图 ak 密钥
2、登录网址 https://lbsyun.baidu.com/

3、注册百度地图开放平台账号，填写认证信息，并且创建应用

安装

npm install vue-baidu-map --save

main.js

import BaiduMap from 'vue-baidu-map';

Vue.use(BaiduMap, {
  ak: '你的AK 密钥',
});

示例

注意

• BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
• 没有设置center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
• 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

入门 HelloWorld

简单封装地图

地图组件

使用

文档地址

相关示例及其他方法可在此处查询！vue-baidu-map