微信小程序输入地址自动获取经纬度

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 腾讯位置服务官网:http://lbs.qq.com/index.htmlSDK下载地址:http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.0.zip微信小程序JavaScript SDK文档地址:http://lbs.qq.com/qqmap_wx_jssdk/index.html地址解析坐标API文档地址:http://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html申请密钥(key)这里就不讲了。

腾讯位置服务官网:http://lbs.qq.com/index.html
SDK下载地址:http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.0.zip
微信小程序JavaScript SDK文档地址:http://lbs.qq.com/qqmap_wx_jssdk/index.html
地址解析坐标API文档地址:http://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html

申请密钥(key)这里就不讲了。

1、选择SDK为微信小程序JavaScript SDK


img_958c2d921468094ea60725b49d783848.png
微信小程序JavaScript SDK

2、下载SDK,下载完后解压,把下载的包解压并复制文件到项目文件夹。


img_543bf67b1d497353d52d55a980fa36d9.png
下载SDK

img_061e71a15e0436da3ee7e9318986b7eb.png
制文件到项目文件夹

3、到要使用的页面js引入SDK文件,并实例化API核心类

// 引入SDK核心类
import QQMapWX from 'xxx/qqmap-wx.js';
 
// 实例化API核心类
let qqMap = new QQMapWX({
    key: '开发密钥(key)' // 必填
});

4、当用户输入地址完毕后解析坐标

<input type="text" bindblur="atuoGetLocation"  />
atuoGetLocation(e) {
        qqMap.geocoder({
            address: e.detail.value,   //用户输入的地址(注:地址中请包含城市名称,否则会影响解析效果),如:'北京市海淀区彩和坊路海淀西大街74号'
            complete: res => {
                 console.log(res.result.location);   //经纬度对象
                } else {
                    console.log('无法定位到该地址,请确认地址信息!');
                }
            }
        });
    }

API使用详情请参考地址解析坐标API文档地址:http://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html

目录
相关文章
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
232 1
|
小程序 JavaScript 定位技术
小程序点击指定地址按钮直接打开地图导航
小程序点击指定地址按钮直接打开地图导航
271 0
|
移动开发 小程序 JavaScript
微信小程序学习实录7(H5嵌入小程序、获取微信收货地址、数组对象url传值、js获取url参数)
微信小程序学习实录7(H5嵌入小程序、获取微信收货地址、数组对象url传值、js获取url参数)
355 0
|
小程序 API 定位技术
微信小程序【关于地址信息的接入以及自动选择当前位置】
微信小程序【关于地址信息的接入以及自动选择当前位置】
345 0
|
小程序 安全 API
「教程」微信小程序获取经纬度查询天气预警信息
「教程」微信小程序获取经纬度查询天气预警信息
249 0
|
小程序 JavaScript 定位技术
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺
251 0
|
小程序 定位技术 API
小程序地图学习之获取位置 获取经纬度 获取地名 获取地址
小程序地图学习之获取位置 获取经纬度 获取地名 获取地址
201 0
|
小程序 定位技术
微信小程序弹出用户授权弹窗,微信小程序引导用户授权,获取位置经纬度
微信小程序弹出用户授权弹窗,微信小程序引导用户授权,获取位置经纬度
503 0
|
小程序
《小程序 大世界》电子版下载地址
《小程序 大世界》总结了淘票票过去 2 年在各大主流平台上的小程序实战经验,带你重新认识万亿市场规模的小程序实践!
136 0
《小程序 大世界》电子版下载地址
|
小程序
《15分钟打造你自己的小程序更新版》电子版下载地址
零基础开发你自己的支付宝小程序,手把手教你从入门到精通的宝典。ToDo待办事项小程序、个人相册小程序、花呗支付小程序、运动步数小程序、云笔记小程序
51 0
《15分钟打造你自己的小程序更新版》电子版下载地址