微信小程序定位--获取经纬度城市街道等位置信息

请先看微信小程序关于定位的API：https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocationobject

可以看到：小程序只提供了一个获取地理位置、速度的api，并没有关于地位位置的信息等，因此需要借助一些第三方的api来实现。

实现方法一：百度地图API

1.登录百度开放平台http://lbsyun.baidu.com并申请AK，填写相关信息。

2.在项目根目录下新建一个路径，下载百度地图微信小程序JavaScript API，解压后得到 bmap-wx.js 文件（解压后有bmap-wx.js和bmap-wx.min.js两种文件，考虑到轻量化，建议用压缩版的bmap-wx.min.js），将其拷贝到新建的路径下，完成。

3.设置请求合法域名

登录微信公众平台－> "设置" －> "开发设置" －> "request 合法域名" －>添加 api.map.baidu.com －> 点击"保存并提交"，如图所示：

打开开发者工具 －> "项目" －> 点击"刷新"，合法域名设置同步完成。

4. 使用：

[javascript] view plain copy

1. var app = getApp()  

2. // 引用百度地图微信小程序JSAPI模块   

3. var bmap = require('../../utils/bmap-wx.js');   

4. var wxMarkerData = [];  //定位成功回调对象    

5. Page({  

6.   /** 

7.    * 页面的初始数据 

8.    */  

9.   data: {  

10.     ak: "。。。", //填写申请到的ak    

11.     markers: [],     //地图标记  

12.     longitude: '',   //经度    

13.     latitude: '',    //纬度    

14.     address: '',     //地址    

15.     business: {},    //商圈   

16.     desc:'' ,        //描述  

17.   },  

18.  onLoad: function (options) {  

19.     console.log("定位");  

20.     var that = this;  

21.     //新建百度地图对象  

22.     var BMap = new bmap.BMapWX({  

23.       ak: that.data.ak  

24.     });  

25.     var success = function(data){  

26.       console.log(data);  

27.       wxMarkerData = data.wxMarkerData;  

28.       that.setData({  

29.         markers:wxMarkerData,  

30.         latitude: wxMarkerData[0].latitude,  

31.         longitude:wxMarkerData[0].longitude,  

32.         address:wxMarkerData[0].address,  

33.         business: wxMarkerData[0].business,  

34.         desc: wxMarkerData[0].desc,  

35.         city: wxMarkerData[0].title,  

36.       });  

37.     }  

38.     var fail = function(data){  

39.       console.log(data);  

40.     }  

41.     BMap.regeocoding({  

42.       fail:fail,  

43.       success:success  

44.     });  

45.   },  

46. })  

[html] view plain copy

1. <view class="jing">经度：{{latitude}}</view>  

2. <view class="wei">纬度：{{longitude}}</view>  

3. <view class="add">地址：{{address}}</view>  

4. <view class="add">商圈：{{business}}</view>  

5. <view class="add">描述：{{desc}}</view>  

实现方法二：腾讯地图API

1. 申请开发者密钥（key）：申请密匙

2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0

3. 安全域名设置，需要在微信公众平台添加域名地址https://apis.map.qq.com

4. 示例 

   [javascript] view plain copy

1. // 引入腾讯地图SDK核心类  

2. var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');  

3. var util = require("../../utils/util.js");  

4. var qqmapsdk;  

5. Page({  

6. 　data: {  

7. 　　resData: []  

8. 　},  

9. 　onLoad: function (options) {  

10. 　　// 实例化腾讯地图API核心类  

11. 　　qqmapsdk = new QQMapWX({  

12. 　　　key: 'HHHHH-BHJDJ-CZQPP-UN4IHS-QYOF2-MYFU3'//此处使用你自己申请的key  

13. 　　});  

14. 　},  

15. 　onShow: function () {  

16. 　　var that = this;  

17. 　　// 腾讯地图调用接口  

18. 　　qqmapsdk…({  

19. 　　　　　  

20. 　　})  

21. 　}  

22. })  

23.