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

好了,入正题。其实之前也被这问题困扰过,在网上也查了一番,没找到解决方法。直到今天,在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. .NET的两种部署模式,了解一下

    前言 以往部署程序一直是习惯性先安装运行时环境,然后再将发布打包好的程序运行起来:但当多个程序依赖不同版本框架平台时,如果部署在同一台机器上,那就需要在同一台机器上安装多个版本的运行时,总感觉有点不太 ...

  2. 认识变量(python)

    一.变量定义 1.1使用规范:先定义,后使用 1.2由三部分组成:变量名,赋值符号,变量值 1.3定义变量就是申请一个内存空间,python内部优化机制,对于数据量小的申请,就不重复开内存空间 二.变 ...

  3. CF549G题解

    变菜了,一年前做这种题10min出结论,现在对着样例胡半天都没结果 首先考虑从判断无解入手. 定义两个位置 \((i,j)\),若 \(a[i]=a[j]+(j-i)\),则 \(i\) 和 \(j\ ...

  4. 什么是SaaS?

    SaaS的定义 SaaS,是Software-as-a-Service的缩写名称,意思为软件即服务,即通过网络提供软件服务. SaaS平台供应商将应用软件统一部署在自己的服务器上,客户可以根据工作实际 ...

  5. Net之多线程用法

    1.多线程 2.线程池 3.Task using System; using System.Collections.Generic; using System.Linq; using System.T ...

  6. Play商店显示需要进行身份认证。您需要登录自己的Google帐户

    前段时间把一加6系统从H2OS换到OxygenOS,Play商店死活不能登录,网络配置等问题已经排除,重装Google全家桶也没有解决问题,最后找到原因. 解决办法:在应用列表中找到Google Pl ...

  7. ZYNQ使用ymodem协议传输文件

    SDK: V2014.4 协议: Ymodem 工具: USB转UART转接线.xshell6软件 可实现各种文件传输,大小不限,只是速度很慢 参考原代码如下: /****************** ...

  8. 论文解读(GMI)《Graph Representation Learning via Graphical Mutual Information Maximization》2

    Paper Information 论文作者:Zhen Peng.Wenbing Huang.Minnan Luo.Q. Zheng.Yu Rong.Tingyang Xu.Junzhou Huang ...

  9. ChIP-seq技术介绍|易基因

    大家好,这里是专注表观组学十余年,多组学科研服务领跑者的易基因. 染色质免疫沉淀后测序(ChIP seq)是一种针对DNA结合蛋白.组蛋白修饰或核小体的全基因组分析技术.由于二代测序技术的巨大进步,C ...

  10. synchronized底层实现原理及锁优化

    一.概述 1.synchronized作用 原子性:synchronized保证语句块内操作是原子的 可见性:synchronized保证可见性(通过"在执行unlock之前,必须先把此变量 ...