微信小程序使用TS+腾讯位置API，输入地址，经纬度全局封装和调用

我们有时候做小程序时需要用到获取地址的经纬度，腾讯位置提供了相关API，我们可以使用其API进行调用实现功能。

一、注册应用及key

1. 登录腾讯位置服务网址腾讯位置服务 - 立足生态，连接未来腾讯位置服务为各类应用厂商和开发者提供领先的LBS服务和解决方案；有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口，适合小程序的插件和各类地图API等。https://lbs.qq.com/dev/console/application/mine2.创建应用，申请key

3.查看 文档进行开发

微信小程序JavaScript SDK | 腾讯位置服务腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案；有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodGeocoder

二、封装及调用

1.准备

（1）下载qqmap-wx-jssdk.min放入小程序libs文件下

 （2）安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

2.封装

 （1）在utils文件夹内创建qqMapSdk.ts文件
 （2）引入sdk及key，key不方便展示，我这里是写在配置文件里，然后再引用的
 

1.  
   // 引入SDK核心类
2.  
   const QQMapWX = require('../libs/qqmap-wx-jssdk.min.js');
3.  
   import { qqMapKey } from '../config/index'
4.  
   // 实例化API核心类
5.  
   const qqmapsdk = new QQMapWX({
6.  
   key: qqMapKey // 必填开发密钥（key）
7.  
   });
8.  
   /**
9.  
   * @param valTo 地址解析经纬度
10.  
    */
11.  
    const valTo = (address:string) => {
12.  
    return new Promise( ( resolve,reject)=>{
13.  
    qqmapsdk.geocoder({
14.  
    address, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
15.  
    success: function(res:any) {//成功后的回调
16.  
    console.log(res);
17.  
    resolve(res)
18.  
     
19.  
    },
20.  
    fail: function(error:any) {
21.  
    console.error(error);
22.  
    reject(error)
23.  
    },
24.  
    })
25.  
    })
26.  
     
27.  
     
28.  
    }
29.  
     
30.  
    export {
31.  
    valTo
32.  
    }

3.引用

我们在任意ts文件引用

1.  
   //引用文件
2.  
   import { valTo } from '../../../utils/qqMapSdk'
3.  
    
4.  
   //调用方法
5.  
    
6.  
   test(){
7.  
    
8.  
   let val = "重庆市重庆市渝中区解放碑"
9.  
   valTo(val).then( (res:any)=>{
10.  
    console.log(res)
11.  
    })
12.  
    }
13.  
     

最后我们打印，查看是否调用成功

这篇好文章是转载于：学新通技术网