写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出！，希望对你有帮助！

好了，入正题。其实之前也被这问题困扰过，在网上也查了一番，没找到解决方法。直到今天，在GitHub冒昧地向大佬提了一个issue，才点醒了我。其实是因为太过急功近利了，没有认真阅读vue-baidu-map提供参考文档，也有可能是看过然后忘记了！

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

我试过，以上这种方法好像是可行，效果可以出来，但我们最好采用作者提供的正确方法！

推荐这种方法！那下面解决进入页面自动定位的方法也是在这里。

下面是我的写法，仅供参考，有不足请指出，我只是一个小白，哈哈！
1、template：

2、js实现：

这里主要是有些小细节需要注意的，图上有标注和注释，稍微看一下就明白了。

最后，还是那句话：我只是一个前端小白，有什么不足之处欢迎指出！

vue-baidu-map 进入页面自动定位的解决方案！的更多相关文章

  1. vue Baidu Map --- vue百度地图插件

    vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...

  2. 使用Vue Baidu Map对百度地图实现输入框搜索定位

    前端时间需要在页面的输入框输入地址,搜索并在百度地图上获取选定结果的坐标,前端使用了Vue + Element-ui,地图方面直接使用了封装好的百度地图vue组件-vue-baidu-map     ...

  3. vue2.0之Vue Baidu Map 局部注册使用

    文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...

  4. Vue Baidu Map 插件的使用

    最近在做一个项目,技术采用的是Vue.js套餐,有个百度地图的需求,当时,大脑宕机,立马去引入百度地图API,当时想到两种方法,一种是在index.html中全局引入js,此法吾不喜,就采用了第二种异 ...

  5. Vue Baidu Map局部注册实现和地图绘点

    需求:在vue项目中,实现用户选择地图绘点或者通过搜索关键字选点 <template> <div id="home"> <h2>首页地图< ...

  6. VS 点击页面自动定位到解决方案资源管理器目录位置

    点击工具→选项→项目和解决方案:勾上“在解决方案资源管理器中跟踪活动项”.

  7. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  8. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  9. Add baidu map in your website (wordpress)

    手动挡 访问应用(AK)Key http://lbsyun.baidu.com/apiconsole/key Basic Map Generator http://api.map.baidu.com/ ...

随机推荐

  1. Vue-router路由判断页面是否登录,未登录跳转到登录页面

    在index.js中 //定义路由 const router = new Router({ routes, strict: process.env.NODE_ENV !== 'production', ...

  2. mysql总结:索引,存储引擎,大批量数据插入,事务,锁

    mysql总结 索引概述: 索引是高效获取数据的数据结构 索引结构: B+Tree() Hash(不支持范围查询,精准匹配效率极高) 存储引擎: 常见存储引擎: Myisam:5.5之前默认引擎,支持 ...

  3. java IO流体系--通识篇

    1.I/O流是什么 Java的I/O流是实现编程语言的输入/输出的基础能力,操作的对象有外部设备.存储设备.网络连接等等,是所有服务器端的编程语言都应该具备的基础能力. I = Input(输入),输 ...

  4. Node.js躬行记（16）——活动配置化

    一直想将一些常规活动抽象化,制作成可配置的.原先的计划是做成拖拽的,那种可视化搭建,运营也能自己搭建页面. 这是一个美好的愿景,但是现实不允许我花太多精力去制作这样一个系统.经过权衡后,先设计成一个可 ...

  5. 为什么不让用join？《死磕MySQL系列 十六》

    大家好,我是咔咔 不期速成,日拱一卒 在平时开发工作中join的使用频率是非常高的,很多SQL优化博文也让把子查询改为join从而提升性能,但部分公司的DBA又不让用,那么使用join到底有什么问题呢 ...

  6. vue项目启动报错 spawn cmd ENOENT errno: -4058

    vue项目启动报错 spawn cmd ENOENT errno: -4058 运行vue项目(npm run dev)报错 提示 'npm' 不是内部或外部命令 cmd输入node -v 有版本号 ...

  7. LGP7915题解

    奇怪的乱搞做法(? 首先我们枚举序列的每一个位置,从这个位置劈开,假设这个位置是 \(i\),那么按照题意模拟,我们能够构造一个最终序列有 \(i\) 个 L 和 \(n-i\) 个 R 的符合题意的 ...

  8. ArcMap操作随记（10）

    1.基于点生成辐射线 [缓冲区]→[构造视线] 2.求算点集中于剩余点距离总和最小的点 [构造视线]→[计算几何]→[汇总] 3.关于空间参考,关于投影 ①横轴墨卡托投影 "等角横轴切圆柱投 ...

  9. ENVI提取水系并进行生态敏感性分析

    4 具体步骤 4.1 DEM数据拼接 (1)打开ENVI软件,选择[File][Open],添加文件夹DEM数据中的影像,操作如图4.1.1所示,结果如图4.1.2. 图4.1.1 添加DEM数据影像 ...

  10. C# 静态成员和方法的学习小结

    C# 静态成员和方法的学习小结 数据成员:数据成员可以分静态变量.实例变量两种.静态成员:静态成员变量是和类相关联的,可以作为类中"共"有的变量(是一个共性的表现),他不依赖特定对 ...