• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
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)
         }
      });
   }
});

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
一款不错的vue和小程序的UI保存一下发布时间:2022-07-18
下一篇:
uniapp app端一键微信登录和小程序端一键微信登录发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap