8

Vue 集成腾讯地图基础api Demo集合

 3 years ago
source link: https://blog.csdn.net/xiaoyaoluntian/article/details/112572353
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Vue 集成腾讯地图基础api Demo集合

Vue 集成腾讯地图基础api Demo集合

.之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大部分都是原生js,且比较基础,并且很多高级Api分布比较分散,不利于开发者查找,所以使用vue结合网上的开源框架vue-admin模仿官方,做一个开箱即用的Demo集合出来。 down下项目来会有个登录界面,随便输入六个字符就可以了(笔者很懒,懒得移除了,已经没救了)

在这里插入图片描述
各位看官可以从这个地址直接拉取代码 然后复制粘贴就好了

由于笔者时间仓促,目前只整理了四个模块分别是(如果效果不错将继续更新,欢迎各位道友提issues,看到会及时解决):

  1. 基础地图引入与展示模块
  2. 3D/2D切换 与效果对比
  3. 关于位置服务的一些基础api 依次为:定位当前位置,定位到初始化位置,定位中心点,添加鼠标点击事件,切换隐藏与显示地图文字
  4. mark标记的基础使用,依次为:添加标记,结束添加标记事件,mark标记点可拖拽。

前期准备工作

点击这条连接注册腾讯地图开发者账号

这是一个Vue集成腾讯地图的demo
项目中需要在index.html上事先引入以下内容


 <script src="https://map.qq.com/api/gljs?v=1.exp&key=你注册之后获取的key值"></script>
 <script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
 <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=你注册之后获取的key值"></script>

然后在main.js 文件下写入这几行代码

Vue.prototype.$Map = window.TMap
Vue.prototype.$Location = new window.qq.maps.Geolocation('你自己的key', '腾讯地图模板-博客展示')

再次提醒 点击这条连接可以注册腾讯地图开发者账号。

书到此地,大部分道友应该直接复制粘贴就可以完美的跑起腾讯地图了。

笔者致力于开发遇到的各种复杂组件,虽说授人以鱼不如授人以渔,但是很多情况下我们是需要先恰饭的,所以先把鱼钓上来,希望帮各位刚上路的道友填饱肚子

以下是我所有组件开源的地址与博客 各位如果觉得有用,别忘了点赞与star,感谢支持

前端组件集合文章
vue组件-echarts地图显示柱状图并添加点击事件文档
vue组件之仿钉钉自定义流程图组件文档
vue组件之树状选择器组件文档
最后给我的老东家打个广告,金现代企业股份有限公司做的项目真的不错,在里面带的一年里,成长很多,尤其在那里接触到了UML统一建模语言,对专业技能提升真的很大。在此感恩。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK