微信小程序使用地图

小程序使用地图:

1.这是基本使用:使用下面的代码可以是进行位置的授权,获取当前的位置,得到腾讯的坐标系和当前的位置名称,街道啥的
2.微信公众平台有官方的map控件,可以进行使用,显示当前的地理位置等等,返回的是 gcj02 坐标系,
需要引入腾讯地图的api —— js:

从这下载:需要引入腾讯地图的api —— js:https://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
    });
 
 
})
  // 判断用户是否拒绝地理位置信息授权,拒绝的话重新请求授权
  getUserLocation: function () {
    let that = this;
    wx.getSetting({
      success: (res) => {
        // console.log(res)
        // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
        // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
        // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置,请确认授权',
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权,调用wx.getLocation的API
                      that.getLocation();
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //调用wx.getLocation的API
          that.getLocation();
        } else {
          //调用wx.getLocation的API
          that.getLocation();
        }
      }
    })
  },
  // 获取定位当前位置的经纬度
  getLocation: function () {
    let that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        let latitude = res.latitude
        let longitude = res.longitude
        // app.globalData.lat = res.latitude; //
        // app.globalData.lng = res.longitude; //把onload定位时候的经纬度存到全局
        that.setData({
          longitude: res.longitude,
          latitude: res.latitude
        })
        that.getLocal(latitude, longitude)
      },
      fail: function (res) {
        console.log('fail' + JSON.stringify(res))
      }
    })
  },
  // 获取当前地理位置
  getLocal: function (latitude, longitude) {
    let that = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        let province = res.result.ad_info.province
        let city = res.result.ad_info.city
        let district = res.result.ad_info.district;
        // 保存一下当前定位的位置留着后面重新定位的时候搜索附近地址用
        // app.globalData.currentLocation = district;
        that.setData({
          province: province,
          city: city,
          latitude: latitude,
          longitude: longitude,
          district: district
        })
        // console.log(res);
        if (that.getDisance(that.data.latitude, that.data.longitude, that.data.centralPositionLat, that.data.centralPositionLon) > that.data.attendValue.centralDistance) {
          that.setData({
            islocat: false
          })
        } else {
          that.setData({
            islocat: true
          })
        }
        that.setData({
          location: res.result.address
        })

        // console.log('这是距离', that.getDisance(that.data.latitude, that.data.longitude, that.data.centralPositionLat, that.data.centralPositionLon) , that.data.attendValue.centralDistance);

        // console.log('province', province, '--', 'city', '--', city, 'latitude', '--', latitude, 'longitude', '--', longitude, 'district', '--', district);

      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    });
  },
  // 测算距离是否在打卡范围内
  getDisance(lat1, lng1, lat2, lng2) {
    var dis = 0;
    var radLat1 = this.toRad(lat1);
    var radLat2 = this.toRad(lat2);
    var deltaLat = radLat1 - radLat2;
    var deltaLng = this.toRad(lng1) - this.toRad(lng2);
    var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
    return dis * 6378137;
  },
  toRad(d) {
    return d * Math.PI / 180;
  },

在这里插入图片描述
在这里插入图片描述

使用插件的进行显示:

比如一些路线规划啥的,腾讯地图基本上是对小程序支持最好的了,毕竟是官方的,所以小程序提供了很多的插件,.
https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginOverview
在这里插入图片描述

咫尺远近却无法靠近的那个你,才敢让你发觉你并不孤寂

推荐这些文章:

微信小程序-用户地理位置授权以及获取用户位置信息

微信小程序有个bug,一旦用户拒绝获取地理位置信息后,重新进入小程序不会再弹出提示框获取用户信息,只有在设置里面允许获取地理位置信息
onLoad: function () {
var that = this
wx.getSetting({
success: (res) => {
// ...

解决MapContext.getCenterLocation(Object object)没有执行的回调问题 | 微信小程序

今天试了MapContext.getCenterLocation(Object object),并没有执行成功success/失败fail的回调,很奇怪,之前用过,同样的代码复制过来就不生效了。
this.mapCtx = wx.createMapContext("myMap");
this.mapCtx.getCenterLocati...

小程序post请求,后台接收不到数据的解决方法

wx.request({
url: 'myurl',
method:'POST',
dataType:'json',
data: {
mydata:mydata
},
success(res) {
...

【微信小程序】地图map组件的使用,打开自动获取当前位置

map的使用

点击查看代码
<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" bindmarkertap="markertap" />

页面启动后自动获取当前经纬度

点击查看代码
data: {
la...

微信小程序打开PDF格式文件的方法

微信小程序打开PDF格式文件的方法
 

wx.downloadFile({
url: 'http://**.*****.***/reshaiwai/demo.pdf', //要预览的PDF的地址
success: function (res) { ...

小程序IOS下载文件

wx.downloadFile({
url: 'https://xxxxxx/api/task/contract/dl/',
success (res) {
const filePath = res.tempFilePath;
success: (res) => {
...

微信小程序结合腾讯地图定位当前城市(位置)

onLoad(options) {this.getUserLocation()
},/**
* 定位地点
*/

getUserLocation: function () {
let _this = this
wx.getLocation({
type: 'gcj02', /...

微信小程序首页地理位置显示

<view class="content">
<view class="">
定位地址:{{city}}
</view>
</view>

Page({

/**
* 页面的初始数据
*/
data: {
locationStatus...

uni.getLocation()不能使用this的原因是。。。

想获取位置并赋值给变量

uni.getLocation({
type: 'wgs84',
success: (res)=> {
console.log('...

文章标题:微信小程序使用地图
文章链接:https://www.dianjilingqu.com/3964.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>