微信小程序 获取位置、移动选点、逆地址解析
WGS- 地心坐标系,即GPS原始坐标体系。在中国,任何一个地图产品都不允许使用GPS坐标,据说是为了保密。GoogleEarth及GPS芯片使用。
、GCJ-02火星坐标系,国测局02年发布的坐标体系,它是一种对经纬度数据的加密算法,即加入随机的偏差。高德、腾讯、Google中国地图使用。国内最广泛使用的坐标体系;
、其他坐标体系:一般都是由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 : ,
      latitude : ,
      longitude: ,
      markers: [],
      callout : {
         content: '预计还有10分钟到达',
         bgColor: "#736F6E",
         color: "#ffffff",
         padding: ,
         display: "ALWAYS",
         borderRadius:
      },
      mobileLocation : {//移动选择位置数据
         longitude : ,
         latitude: ,
         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: ,
               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)
         }
      });
   }
});
微信小程序 获取位置、移动选点、逆地址解析的更多相关文章
- uniapp|微信小程序获取当前城市名称--逆地址解析
		六年代码两茫茫,不思量,自难忘 6年资深前端主管一枚,只分享技术干货,项目实战经验 关注博主不迷路~ 问题 uniapp开发的小程序需要获取当前城市名称 解决步骤 看文档 当然是看uniapp文档,我 ... 
- 微信小程序~获取位置信息
		微信小程序提供的getlocation来获取用户的定位,能够得到用户的经纬度信息 (注:getloaction需要用户授权scope.userLocation)结合map组件能够得到用户的详细定位 & ... 
- [小程序]微信小程序获取位置展示地图并标注信息
		1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用wx.getLocation获取自己的位置,然后再回调中使用setData ... 
- 微信小程序获取位置
		获取位置 getLocation wx.getLocation({ type: 'wgs84', success (res) { const latitude = res.latitude const ... 
- 微信小程序获取当前经纬度并逆解析地址代码
		功能如标题. map.wxml代码如下: <!--miniprogram/pages/map/map.wxml--> <view><text>经度{{jd}}< ... 
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
		因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ... 
- 微信小程序-获取当前位置和城市名
		微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ... 
- 微信小程序-获取当前城市位置及再次授权地理位置
		微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ... 
- 微信小程序-获取经纬度
		微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ... 
随机推荐
- springboot集成logback日志
			简介 spring boot内部使用Commons Logging来记录日志,但也保留外部接口可以让一些日志框架来进行实现,例如Java Util Logging,Log4J2还有Logback. 如 ... 
- _faction
			一.自定义阵营独立于联盟,部落,联盟和部落玩家可以加入同一阵营 二._function_menu表可以配置自定义阵营开启 二.配合_pvp表,可以实现区域的自定义阵营PVP 三.配合_req表fact ... 
- C#:导入Excel通用类(Xls格式)
			PS:在CSV格式和XLSX格式中有写到通用调用的接口和引用的插件,所以在这个xls格式里面并没有那么详细,只是配上xls通用类. 一.引用插件NPOI.dll.NPOI.OOXML.dll.NPOI ... 
- dbm.error: need 'c' or 'n' flag to open new db
			#coding=utf-8 import shelve with shelve.open("shelve.ini","w") as f: f["k1& ... 
- Django中ORM系统多表数据操作
			一,多表操作之增删改查 1.在seting.py文件中配置数据库连接信息 2.创建数据库关联关系models.py from django.db import models # Create your ... 
- 【测试工程师面试】面试官热衷询问的N个问题
			1. 数据库中左连接右连接的区别 2.JAVA中continue和break的区别 3.Linux中查看某一个进程并且杀死 1.数据库中多表连接,根据不同的表的某一个字段进行关联, 左连接是将左边表全 ... 
- [转]C++中const、volatile、mutable的用法
			原文:https://blog.csdn.net/imJaron/article/details/79657642 const意思是“这个函数不修改对象内部状态”. 为了保证这一点,编译器也会主动替你 ... 
- 在选择列表中无效,因为该列既不包含在聚合函数中,也不包含在 GROUP BY 子句
			在选择列表中无效,因为该列既不包含在聚合函数中,也不包含在 GROUP BY 子句 突然看到这个问题,脑袋一蒙,不知道啥意思,后来想想,试图把select里的选项放到后面,问题自然解决! 下面这 ... 
- leecode第六十一题(旋转链表)
			/** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ... 
- MySQL学习(二)
			1 增删改查是针对表来说的. 2 创建一个表 mysql> create table stu( -> id int primary key auto_increment, -> sn ... 
