为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
WebApp

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

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


webp

微信小程序JavaScript SDK

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


webp

下载SDK


webp

制文件到项目文件夹

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文档



作者:枝枝_zhizhi
链接:https://www.jianshu.com/p/4f76fb5aa288


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JAVA开发工程师
手记
粉丝
205
获赞与收藏
1011

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消