vue-baidu-map 进入页面自动定位的解决方案!
写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考。若有不完善的地方,欢迎各位大佬指出!,希望对你有帮助!
好了,入正题。其实之前也被这问题困扰过,在网上也查了一番,没找到解决方法。直到今天,在GitHub冒昧地向大佬提了一个issue,才点醒了我。其实是因为太过急功近利了,没有认真阅读vue-baidu-map提供参考文档,也有可能是看过然后忘记了!
首先要明确一点(文档原话):由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此,请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码,不要试图在 vue 自身的生命周期中调用 BMap 类,更不要在这些时机修改 model 层。
我试过,以上这种方法好像是可行,效果可以出来,但我们最好采用作者提供的正确方法!
推荐这种方法!那下面解决进入页面自动定位的方法也是在这里。
下面是我的写法,仅供参考,有不足请指出,我只是一个小白,哈哈!
1、template:
2、js实现:
这里主要是有些小细节需要注意的,图上有标注和注释,稍微看一下就明白了。
最后,还是那句话:我只是一个前端小白,有什么不足之处欢迎指出!
vue-baidu-map 进入页面自动定位的解决方案!的更多相关文章
- vue Baidu Map --- vue百度地图插件
vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...
- 使用Vue Baidu Map对百度地图实现输入框搜索定位
前端时间需要在页面的输入框输入地址,搜索并在百度地图上获取选定结果的坐标,前端使用了Vue + Element-ui,地图方面直接使用了封装好的百度地图vue组件-vue-baidu-map ...
- vue2.0之Vue Baidu Map 局部注册使用
文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...
- Vue Baidu Map 插件的使用
最近在做一个项目,技术采用的是Vue.js套餐,有个百度地图的需求,当时,大脑宕机,立马去引入百度地图API,当时想到两种方法,一种是在index.html中全局引入js,此法吾不喜,就采用了第二种异 ...
- Vue Baidu Map局部注册实现和地图绘点
需求:在vue项目中,实现用户选择地图绘点或者通过搜索关键字选点 <template> <div id="home"> <h2>首页地图< ...
- VS 点击页面自动定位到解决方案资源管理器目录位置
点击工具→选项→项目和解决方案:勾上“在解决方案资源管理器中跟踪活动项”.
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- Add baidu map in your website (wordpress)
手动挡 访问应用(AK)Key http://lbsyun.baidu.com/apiconsole/key Basic Map Generator http://api.map.baidu.com/ ...
随机推荐
- 关于LR的笔记
- 矩池云上安装yolov4 darknet教程
这里我是用PyTorch 1.8.1来安装的 拉取仓库 官方仓库 git clone https://github.com/AlexeyAB/darknet 镜像仓库 git clone https: ...
- 小程序授权登录并 laravel7(laravel8) token 应用
参考博客: https://blog.csdn.net/qq_42839386/article/details/118279530 1:composer 下载 composer require fir ...
- java.sql.SQLException: Unable to load authentication plugin 'caching_sha2_password'.
原来是mysql5.X,升级到8.X,连接数据库就报错: Unable to load authentication plugin 'caching_sha2_password'. 原因分析: 可能为 ...
- LGP2414题解
难不成是我后缀自动机学魔怔了,AC 自动机都能套上线段树 题意:给你一颗 Trie,每次询问两个节点 \(u,v\),\(u\) 代表的字符串在 \(v\) 代表的字符串中出现了多少次. 让我们思考一 ...
- Flink消费kafka
Flink消费Kafka https://blog.csdn.net/boling_cavalry/article/details/85549434 https://www.cnblogs.com/s ...
- linux 查看命令
linux查找命令 ls查看文件信息 就是list的缩写,通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文件权限(包括目录.文件夹.文件权限)查看目录信息等等 常用参数搭 ...
- 程序流程控制2 for循环
for循环是python中的一个通用的序列迭代器,可以遍历序列对象中的所有对象. 1.for循环基本格式 for循环基本格式如下. for var in object: 循环体语句块 else: 语句 ...
- Prometheusbu部署使用-1
Prometheus+grafana部署使用 主机列表: 192.168.161.130 : Prometheus 192.168.161.128 : node-1 192.168.161.129 : ...
- Spring---Spring专题(二)
1.Spring配置数据源 1.1 数据源(连接池)的作用 数据源(连接池)是提高程序性能而出现的 事先实例化数据源,初始化部分链接资源 使用连接资源时从数据源中获取 使用完毕后将连接资源归还给数据源 ...