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

看文章 扫一扫 领红包哦

请先看微信小程序关于定位的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. 使用：

var app = getApp()
// 引用百度地图微信小程序JSAPI模块 换成你的文件路径 
var bmap = require('../../utils/bmap-wx.min.js'); 
var wxMarkerData = [];  //定位成功回调对象  
Page({
  /**
   * 页面的初始数据
   */
  data: {
    ak: "。。。", //填写申请到的ak  
    markers: [],     //地图标记 这里暂没用到
    longitude: '',   //经度  
    latitude: '',    //纬度  
    address: '',     //地址  
    business: {},    //商圈 
    desc:'' ,        //描述
  },
 onLoad: function (options) {
    console.log("定位");
    var that = this;
    //新建百度地图对象
    var BMap = new bmap.BMapWX({
      ak: that.data.ak
    });
    var success = function(data){
      console.log(data);
      wxMarkerData = data.wxMarkerData;
      that.setData({
        markers:wxMarkerData,
        latitude: wxMarkerData[0].latitude,
        longitude:wxMarkerData[0].longitude,
        address:wxMarkerData[0].address,
        business: wxMarkerData[0].business,
        desc: wxMarkerData[0].desc,
        city: wxMarkerData[0].title,
      });
    }
    var fail = function(data){
      console.log(data);
    }
    BMap.regeocoding({
      fail:fail,
      success:success
    });
  },
})

       经度：{{latitude}}
       纬度：{{longitude}}
       地址：{{address}}
       商圈：{{business}}
       描述：{{desc}}

实现方法二：腾讯地图API

1. 申请开发者密钥（key）：申请密匙
2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
3. 安全域名设置，需要在微信公众平台添加域名地址https://apis.map.qq.com
4. 示例 

   // 引入腾讯地图SDK核心类
   var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
   var util = require("../../utils/util.js");
   var qqmapsdk;
   Page({
   　data: {
   　　resData: []
   　},
   　onLoad: function (options) {
   　　// 实例化腾讯地图API核心类
   　　qqmapsdk = new QQMapWX({
   　　　key: 'HHHHH-BHJDJ-CZQPP-UN4IHS-QYOF2-MYFU3'//此处使用你自己申请的key
   　　});
   　},
   　onShow: function () {
   　　var that = this;
   　　// 腾讯地图调用接口
   　　qqmapsdk…({
   　　　　　
   　　})
   　}
   })