vue 集成腾讯地图根底api Demo汇合(根底地图引入与展现模块,地址逆解析，3D/2D切换 ，位置服务，mark标记)
写作背景
官方网站的demo大部分都是原生js，较根底，很多高级Api散布比拟扩散，为了有利于开发者查找，应用vue联合网上的开源框架vue-admin参照官方网站demo，做一个开箱即用的Demo汇合进去。（ down下我的项目来会有个登录界面，轻易输出六个字符就能够了）
我的项目预览
大家能够从这个地址间接拉取代码 而后复制粘贴就好了。
我的项目阐明
因为笔者工夫仓促，目前只整顿了四个模块别离是（如果成果不错将持续更新，欢送各位道友提issues，看到会及时解决）：
- 根底地图引入与展现模块
- 3D/2D切换 与成果比照
- 对于位置服务的一些根底api 顺次为：定位以后地位，定位到初始化地位，定位中心点，增加鼠标点击事件，切换暗藏与显示地图文字
- 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.TMapVue.prototype.$Location = new window.qq.maps.Geolocation('你本人的key', '腾讯地图模板-博客展现')书到此地，大部分道友应该间接复制粘贴就能够完满的跑起腾讯地图了。
更新：如何退出地位逆解析服务
调用此服务必须领有开发者账号并申请属于本人的key，点击这条连贯注册腾讯地图开发者账号，获取key。
具体应用办法：
通过get办法调用 ：
{rul:'http://localhost:9528/qq/ws/geocoder/v1/?location=lat,lng&key=你的key&get_poi=1'}地位逆解析有几处留神的中央：
- 跨域
不晓得是不是只有本人这样，在本地启动我的项目时调用逆解析地址会报跨域问题，须要各位在程序里配置好跨域代码如下
在vue.config.js外面配置跨域（如果是cli低版本的敌人,麻烦自行网上搜寻解决方案，曾经比拟健全了，笔者就不在这里赘述）
devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, proxy: { // 配置跨域 '/qq': { target: 'https://apis.map.qq.com/', // 这里后盾的地址模仿的;应该填写你们实在的后盾接口 ws: true, changOrigin: true, // 容许跨域 pathRewrite: { '^/qq': '' // 申请的时候应用这个api就能够 }} },- 受权报错
报错类型如下
{ "status": 110, "message": "申请起源未被受权, 此次申请起源域名：localhost9528" } { "status": 112, "message": "IP未被受权，以后IP：127.0.0.1" } { "status": 111, "message": "签名验证失败" }解决办法均是通过腾讯地位服务平台，联合官网文档配置key治理，如图
具体api参数请参照 官网文档
原文作者：咱们得站着 原文链接：https://blog.csdn.net/xiaoyao...