小程序引入高德/百度地图坐标系详解

简介: 小程序引入高德/百度地图坐标系详解

小程序引入高德/百度地图坐标系详解


高德官网之在原生小程序中使用的常见问题



目前在小程序中使用 高德地图只支持以下功能 :地址描述、POI和实时天气数据



小结:从高德api中获取数据然后更新到腾讯地图的map上 其实还是使用的腾讯地图 只不过数据的来源来自高德地图


我们可以简单的实现从高德获取数据 然后在腾讯地图的画布上进行绘制电子围栏


但是一些特殊的场景,坐标选点、地址搜索等一些都是腾讯组件内部封装的所以以高德地图来看很难实现



关于坐标系


  • 高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系

  • 百度地图使用的是BD-09坐标系

  • 底层接口(HTML5 Geolocation或ios、安卓API)通过GPS设备获取的坐标使用的是WGS-84坐标系


不同平台获取的经纬度信息可能并不是在同一个坐标系下。


坐标系分为:


  • GCJ-02 - 国测局坐标


中国大陆所有公开地理数据都需要至少用GCJ-02进行加密**,也就是说我们从国内公司的产品中得到的数据,一定是经过了加密的


高德地图、腾讯地图以及谷歌中国区地图


  • BD-09 - 百度坐标系


是百度地图使用的地理坐标系,其在GCJ-02上多增加了一次变换,用来保护用户隐私。从百度产品中得到的坐标都是BD-09坐标系。


百度地图


  • WGS-84 - 世界大地测量系统


是使用最广泛的坐标系,也是世界通用的坐标系,GPS设备得到的经纬度就是在WGS84坐标系下的经纬度


通常通过底层接口得到的定位信息都是WGS84坐标系。


坐标转化


  • 百度地图以及高德地图都提供了一些方法来转换不同坐标系下的坐标,但是它们都需要进行网络请求,性能很差。


  1. gcoord

gcoord主要解决了两个问题


  • 能将坐标在不同坐标系下相互转换

  • 能够处理GeoJSON

  • 示例 - 从WGS-84坐标系转换为BD-09坐标系


var result = gcoord.transform(
    [ 116.403988, 39.914266 ],    // 经纬度坐标
    gcoord.WGS84,                 // 当前坐标系
    gcoord.BD09                   // 目标坐标系
);
console.log( result );  // [ 116.41661560068297, 39.92196580126834 ]


详细的使用方式请查看gcoord的文档


更专业的坐标系处理工具,可以使用proj4js等开源库


项目中引用高德地图


注:百度地图和高德的引入方式差不多只是需要引入的是百度的插件 百度官网


1.下载并安装微信小程序插件


amap-wx.js


在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下



2.设置安全通讯域名




3.在 index.js 中引入 amap-wx.js 文件


var amapFile = require('path/to/amap-wx.js');//如:..­/..­/libs/amap-wx.js


  • JS调用API


Page({
  /**
   * 页面的初始数据
   */
  data: {
    markers: [{ // 绘制 markers
      iconPath: "../../image/green_tri.png",
      id: 0,
      latitude: 39.989643,
      longitude: 116.481028,
      width: 23,
      height: 33
    },{
      iconPath: "../../image/green_tri.png",
      id: 0,
      latitude: 39.90816,
      longitude: 116.434446,
      width: 24,
      height: 34
    }],
    distance: '',
    cost: '',
    polyline: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var myAmapFun = new amapFile.AMapWX({key:'4ac16a1fe3903abf2f7663a2888860f9'});
    myAmapFun.getPoiAround({
      success: function(data){
        console.log(data,"myAmapFun")
        //成功回调
      },
      fail: function(info){
        //失败回调
        console.log(info)
      }
    })
    //获取自己所在地址的定位
    myAmapFun.getRegeo({
      success: function(data){
        //成功回调
        console.log('---------')
        console.log(data,"获取自己所在地址的定位")
      },
      fail: function(info){
        //失败回调
        console.log(info)
      }
    })
    //获取定位地点天气内容
    myAmapFun.getWeather({
      success: function(data){
        console.log(data,'123')
        //成功回调
      },
      fail: function(info){
        //失败回调
        console.log(info)
      }
    })
    //路线
    myAmapFun.getDrivingRoute({
      origin: '116.481028,39.989643',
      destination: '116.434446,39.90816',
      success: function(data){
        var points = [];
        if(data.paths && data.paths[0] && data.paths[0].steps){
          var steps = data.paths[0].steps;
          for(var i = 0; i < steps.length; i++){
            var poLen = steps[i].polyline.split(';');
            for(var j = 0;j < poLen.length; j++){
              points.push({
                longitude: parseFloat(poLen[j].split(',')[0]),
                latitude: parseFloat(poLen[j].split(',')[1])
              })
            } 
          }
        }
        that.setData({
          polyline: [{
            points: points,
            color: "#0091ff",
            width: 6
          }]
        });
      },
      fail: function(info){
      }
    })
  },  
})


  • HTML


<view class="map_box">
  <map id="navi_map" longitude="116.451028" latitude="39.949643" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>
</view>


452fc0d979e945b6bc746cbab77564b3.gif


以上就是小程序引入高德/百度地图坐标系详解感谢大家的阅读


如碰到其他的问题 可以私下我 一起探讨学习


如果对你有所帮助还请 点赞 收藏谢谢~!


关注收藏博客 作者会持续更新…

相关文章
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
231 1
|
移动开发 小程序 JavaScript
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
569 0
|
小程序 定位技术
小程序地图转百度地图坐标
小程序地图转百度地图坐标
158 0
|
定位技术
高德首页上线小程序主入口,阿里小程序的集团军打法升级
高德首页入口、商家详情页卡片的开放,表明阿里小程序的集团军打法已从初期的流量互通,升级至服务共建、行业共创阶段。
1300 12
高德首页上线小程序主入口,阿里小程序的集团军打法升级
|
小程序
“蚂蚁充电”互通高德,阿里小程序集团军持续发力
你可以在高德地图 App 使用蚂蚁充电小程序啦。
1156 0
“蚂蚁充电”互通高德,阿里小程序集团军持续发力
|
大数据 开发者 容器
【技术沙龙】阿里小程序云生态及实践分享 - 阿里云,支付宝,淘宝,高德,钉钉 专家齐聚,畅聊阿里小程序生态!
阿里云栖开发者沙龙是“云栖社区”主办的线下技术沙龙品牌,希望通过技术干货分享来打通线上线下专家和开发者的连接。沙龙每期将定位不同的技术方向,逐步覆盖 云计算,大数据,前端,PHP,android,AI,运维,测试 等技术领域,并会穿插一些特别专场(开源专场,女性开发者专场,开发者成长专场等)。
61866 0
|
API 定位技术
小程序中使用百度地图
介绍小程序中调用百度地图常用的三个方法。(使用前记得先要去百度官网注册需要使用的ak账号) 1.地址解析,方法分为两部,先通过微信获取到用户的坐标,再将坐标传入百度地图api中进行地址解析。
2017 0
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
270 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
112 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目