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

本来我对这东西是有抵触心理的,也没想过这东西能有啥大用,不过昨天做了一个二维码停车的小程序发了给朋友们用用,感觉反应还可以,so,就想用定位试试看看能不能折腾些什么东东出来~~~

作者:UFO00001
原文:http://blog.csdn.net/ufo00001/article/details/72879360

请先看微信小程序关于定位的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.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…({  
           
      })  
     }  
    })

您可能会喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

在这输入验证码 : *

Reload Image