zoukankan      html  css  js  c++  java
  • 微信小程序(小程序定位获取地址信息篇)

    程序思路:

    1、小程序获取用户定位信息(经纬度)

    2、引入腾讯地图SDK ,将经纬度传入逆向定位方法  

    3、SDK下载地址 

    以下是代码

    js

    // 引入SDK核心类
    var QQMapWX = require('xxx/qqmap-wx.js');
     
    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
        key: '开发密钥(key)' // 必填
    });  
     
    //在Page({})中使用下列代码
    //触发表单提交事件,调用接口
        // 获取定位
        getLocation(){
            let that = this
            wx.getLocation({
                success: function (res) {
              //格式化经纬度
                    that.formSubmit(res.latitude+ ',' + res.longitude)
                },
                fail: function(error) {
                    wx.showToast({
                        title: "获取定位失败",
                        icon: 'none',
                        duration: 1500
                      })
                },
            })
        },

    formSubmit(e) { var _this = this; qqmapsdk.reverseGeocoder({ //位置坐标,默认获取当前位置,非必须参数 /** * //Object格式 location: { latitude: 39.984060, longitude: 116.307520 }, */ /** * //String格式 location: '39.984060,116.307520', */ location: e.detail.value.reverseGeo || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式 //get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数 success: function(res) {//成功后的回调 console.log(res); var res = res.result; var mks = []; /** * 当get_poi为1时,检索当前位置或者location周边poi数据并在地图显示,可根据需求是否使用 * for (var i = 0; i < result.pois.length; i++) { mks.push({ // 获取返回结果,放到mks数组中 title: result.pois[i].title, id: result.pois[i].id, latitude: result.pois[i].location.lat, longitude: result.pois[i].location.lng, iconPath: './resources/placeholder.png', //图标路径 20, height: 20 }) } * **/ //当get_poi为0时或者为不填默认值时,检索目标位置,按需使用 mks.push({ // 获取返回结果,放到mks数组中 title: res.address, id: 0, latitude: res.location.lat, longitude: res.location.lng, iconPath: './resources/placeholder.png',//图标路径 20, height: 20, callout: { //在markers上展示地址名称,根据需求是否需要 content: res.address, color: '#000', display: 'ALWAYS' } }); _this.setData({ //设置markers属性和地图位置poi,将结果在地图展示 markers: mks, poi: { latitude: res.location.lat, longitude: res.location.lng } }); }, fail: function(error) { console.error(error); }, complete: function(res) { console.log(res); } }) }

     不懂的同学欢迎留言

  • 相关阅读:
    Java-IO流系列-随机存取文件流
    Java-IO流系列-标准输入输出流
    Java-IO流系列-转换流
    Java-IO流系列-缓冲流
    Java-IO流系列-FileInputStream和FileOutStream
    Java-IO流系列-FileReader与FileWriter
    Java-IO流系列-IO流原理以及流的分类
    windows使用chrome调试ios webView
    页面上多个audio只播放一个
    阿里网盘分享
  • 原文地址:https://www.cnblogs.com/yx-liu/p/14368730.html
Copyright © 2011-2022 走看看