微信小程序微信小程序开发微信小程序(应用号)

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

2018-09-05  本文已影响17人  枝枝_zhizhi

腾讯位置服务官网: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


微信小程序JavaScript SDK

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


下载SDK
制文件到项目文件夹

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

上一篇下一篇

猜你喜欢

热点阅读