微信小程序 获取位置、移动选点、逆地址解析

WGS-84 地心坐标系,即GPS原始坐标体系。在中国,任何一个地图产品都不允许使用GPS坐标,据说是为了保密。GoogleEarth及GPS芯片使用。
1、GCJ-02火星坐标系,国测局02年发布的坐标体系,它是一种对经纬度数据的加密算法,即加入随机的偏差。高德、腾讯、Google中国地图使用。国内最广泛使用的坐标体系;
2、其他坐标体系:一般都是由GCJ-02进过偏移算法得到的。这种体系就根据每个公司的不同,坐标体系都不一样了。比如,百度的BD-09坐标、搜狗坐标等
 本回答由网友推荐
wxml:
<view class="page-body">
  <view class="page-section page-section-gap">
    <map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location></map>
  </view>
  <view class="btn-area">
    <button bindtap="moveToLocation" class="page-body-button" type="primary">移动位置</button>

    选择的位置:
    <view>位置:{{mobileLocation.address}}</view>
    <view>经度:{{mobileLocation.longitude}}</view>
    <view>纬度:{{mobileLocation.latitude}}</view>

  </view>
</view>

js:

var QQMapWX = require(‘../../libs/qqmap-wx-jssdk.js‘);
var qqmapsdk;
Page({
   data: {
      borderRadius : 5,
      latitude : 0,
      longitude: 0,
      markers: [],
      callout : {
         content: ‘预计还有10分钟到达‘,
         bgColor: "#736F6E",
         color: "#ffffff",
         padding: 10,
         display: "ALWAYS",
         borderRadius: 5
      },
      mobileLocation : {//移动选择位置数据
         longitude : 0,
         latitude: 0,
         address: ‘‘,
      }
   },
    onLoad: function () {
       // 实例化API核心类
       qqmapsdk = new QQMapWX({
          key: ‘qq-map key‘
       });
      var that = this;
      //获取位置
      wx.getLocation({
         type: ‘gcj02‘,//默认为 wgs84 返回 gps 坐标,gcj02 返回可用于wx.openLocation的坐标
         success: function(res) {
            console.log(res);
            var marker = [{
               id: 0,
               latitude: res.latitude,
               longitude: res.longitude,
               callout: {//窗体
                  content: that.data.callout.content,
                  bgColor: that.data.callout.bgColor,
                  color: that.data.callout.color,
                  padding: that.data.callout.padding,
                  display: that.data.callout.display,
                  borderRadius: that.data.callout.borderRadius
               },
            }];
            var mobileLocation = {
               latitude: res.latitude,
               longitude: res.longitude,
            };
            that.setData({
               latitude: res.latitude,
               longitude: res.longitude,
               markers: marker,
            });
            //根据坐标获取当前位置名称,显示在顶部:腾讯地图逆地址解析
            qqmapsdk.reverseGeocoder({
               location: {
                  latitude: res.latitude,
                  longitude: res.longitude
               },
               success: function (addressRes) {
                  var address = addressRes.result.formatted_addresses.recommend;
                  mobileLocation.address = address;
                  console.log(address)
                  //当前位置信息
                  that.setData({
                     mobileLocation: mobileLocation,
                  });
               }
            });
         }
      });

      this.mapCtx = wx.createMapContext(‘qqMap‘);
   },

    //移动选点
   moveToLocation: function () {
      var that = this;
      wx.chooseLocation({
         success: function (res) {
            let mobileLocation = {
               longitude: res.longitude,
               latitude: res.latitude,
               address: res.address,
            };
            that.setData({
               mobileLocation: mobileLocation,
            });
         },
         fail: function (err) {
            console.log(err)
         }
      });
   }
});

原文地址:https://www.cnblogs.com/boundless-sky/p/9268445.html

时间: 2024-10-07 05:50:44

微信小程序 获取位置、移动选点、逆地址解析的相关文章

微信小程序~获取位置信息

微信小程序提供的getlocation来获取用户的定位,能够得到用户的经纬度信息 (注:getloaction需要用户授权scope.userLocation)结合map组件能够得到用户的详细定位 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location style="width: 100%;

微信小程序获取位置

获取位置 getLocation wx.getLocation({ type: 'wgs84', success (res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy } }) wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 打开地图 wx.getLocat

微信小程序-获取当前位置和城市名

微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数): 3,微信没有将经纬度直接转换为地理位置,借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API(返回信息中包括国家,省,市,区,经纬度等地理位置)步骤描述清楚以后,下面就开始按步骤操作了:(本文仅仅讲述如何获取用户地理位置的授权) 图示为获取用户地理位置授权弹窗 在用户首次进入某页面(

微信小程序获取输入框(input)内容

微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type="tel" bindinput="getInput" /> js Page({ data:{ getInput: null }, getInput:function(){//方法1 this.data.getInput = e.detail.value; }, /

微信小程序-获取用户信息和openid,session_key,

1:微信小程序获取用户信息:比如常用的 avatarUrl (用户头像),nickName (用户名称) 等等, (1):获取用户信息调用 wx.getUserInfo 代码如下: 直接请求接口就可以了,随后把数据存放到storage中,下次直接取 就不用再请求接口,, 2:获取 openid (1):请求wx.login 接口,代码如下: url:是微信提供的 appid:是小程序的appid secret:是小程序开发设置的 AppSecret 只要获取到这两项,用户信息可以用于页面,ope

微信小程序 获取用户信息 encryptData解密 C#版本

最近学习小程序开发,需要对encryptData解密,获取用户信息,官方源码没有C#版本,网上的资料比较杂,有的使用还有问题,下面贴一下自己亲试可以使用的一个源码 1.code 换取 session_key 前端先调 wx.login 得到code传输到后端,后端通过接口 https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authoriza

微信小程序 获取用户openid

1,可以在小程序app.js入口文件中放入登录代码 wx.login({ success: res => { // 登录注册接口 if (res.code) { // 调用服务端登录接口,发送 res.code 到服务器端换取 openId, sessionKey, unionId并存入数据库中 } else { console.log('登录失败!' + res.errMsg) } } }); 2,服务端PHP,小程序获取openid接口 // 获取openid function getOpe

微信小程序获取登录手机号

小程序获取登录用户手机号. 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发. 首先,放置一个 button 按钮,将 button 的 open-type 的属性值设为 getPhoneNumber . 当用户点击并通过之后,通过绑定的事件获取微信服务器返回过来的加密数据,再根据 session_key 和 app_id 通过后台解密就可以获取手机号啦. 说到这,就上码吧!!! 1 <!--index.wxml--&g

微信小程序获取用户手机号详解

最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: <span style="font-size:18px;">public cl