这是官网地址

https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

需要声明注意的是

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

  • 没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外,因为百度地图会根据地名自动调整 zoom 的值。

  • 由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此,请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码,不要试图在 vue 自身的生命周期中调用 BMap 类,更不要在这些时机修改 model 层。

一定要注意异步加载!!

<baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" @ready="handler">

</baidu-map>
还有就是声明要规范   main.js中
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: '你的key'
})

vue脚手架搭建项目引用百度地图--出坑的更多相关文章

  1. 1.vue脚手架搭建项目

    前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...

  2. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  3. 使用vue脚手架搭建项目并将px自动转化为rem

    一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...

  4. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  5. vue项目 调用百度地图 BMap is not defined

    这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...

  6. 小tips:使用vue-cli脚手架搭建项目,关于eslint语法检测配置

    配置文件在项目根目录里,文件名以 .eslintrc.* 为名. 为了兼容以前写的代码,避免修改太多代码,把不符合自己习惯的规则去掉,简单配置代码: module.exports = { root: ...

  7. vue-cli脚手架搭建项目简单入门一

    搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...

  8. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

  9. 使用 vue-cli(脚手架)搭建项目

    一.使用 vue-cli(脚手架)搭建项目 1) Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具 2) 在线文档:https://github.c ...

随机推荐

  1. DSAPI之摄像头追踪指定颜色物体

    Private CAM As New DSAPI.摄像头_avicap32 Private Clr As Color = Color.FromArgb(230, 50, 50) Private _Lo ...

  2. arcgis10.0的ArcGIS Services Directory显示401,需要身份验证,访问被拒绝,rest/services需要输入用户名和密码

    大家好! 这个错误我也不想说什么,主要是应公司开发需求,从自己的arcgis10.2的版本改为arcgis10.0的版本,装完之后遇到一个错误,老是显示访问被拒绝,我也是找了很多的方式,没有在网上找到 ...

  3. 从零开始学安全(三十一)●kali 输入 msfconsole 启动报错

    解决方法: 实际上是因为没安装就开启了msf,用下面三个命令就解决了 sudo apt-get updatesudo apt-get install metasploit-frameworkmsfco ...

  4. 用JS编写一个函数,返回数组中重复出现过的元素

    用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: , , , , , , , ]; var getRepeat = function (arr) { var obj = {}; , le ...

  5. vue.js引入

    开始学习vue.js,引入vue.vue.js一定要在head里面引入,实际开发中我们可能在body中引入,但是可能存在抖屏现象. 为了避免出现抖屏现象,我们引入vue.js或者jquery.js 最 ...

  6. SDOI 2018划水记

    Day0 最后一天啦,此时不颓更待何时? 上午10:15坐车从gryz出发,在一路颓废中到了农大 不得不说,农大的宾馆真的好高档啊,壁橱里面居然有保险柜!电视柜厨子里居然有冰箱!!冰箱里居然有饮料!! ...

  7. 驰骋工作流引擎JFlow与activiti的对比之4种包含多实例的模式

    1. 无同步的多实例(MIwithout) 在流程中,一个活动可以激活多个实例,每个实例相互独立,并不需要在后面进行同步. 例子:比如用户购买了N本书,于是后续的支付账单.更新客户可以以本书为单位各自 ...

  8. Android 中使用 dlib+opencv 实现动态人脸检测

    1 概述 完成 Android 相机预览功能以后,在此基础上我使用 dlib 与 opencv 库做了一个关于人脸检测的 demo.该 demo 在相机预览过程中对人脸进行实时检测,并将检测到的人脸用 ...

  9. 章节九、1-Selenium环境配置

    一.Selenium环境安装配置,这里使用Selenium WebDriver 3.6.0 1.下载Selenium WebDriver (点击后网站响应比较慢,需要多等等) 2.打开该网址后点击“d ...

  10. 微信小程序下拉刷新和上拉加载的实现

    一: 下拉刷新 下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 "enablePullDownRefresh": true, //开启下拉刷新 & ...