zoukankan      html  css  js  c++  java
  • 微信小程序 获取位置、移动选点、逆地址解析

    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=" 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)
             }
          });
       }
    });
  • 相关阅读:
    iOS开发
    金额的存储处理及显示
    jquery.validate验证表单
    js获取当前日期时间
    使用Bootstrap插件datapicker获取时间
    使用Bootstrap的suggest下拉插件
    动态菜单树加载过程
    043 组合数据类型小结
    038 序列类型操作-元组类型和列表类型
    033 模块4-PyInstaller库的使用
  • 原文地址:https://www.cnblogs.com/boundless-sky/p/9268445.html
Copyright © 2011-2022 走看看