ミニプログラムへの Gaode/Baidu 地図座標系の導入の詳細な説明

ミニプログラムへの Gaode/Baidu 地図座標系の導入の詳細な説明

公式サイト最終更新日時： 最終更新日時：2021年08月17日

• ネイティブ アプレットで使用する AutoNavi の公式 Web サイトにあるよくある質問へのリンク
  

• 現在、アプレットでの Gaode マップの使用は、住所の説明、POI、およびリアルタイムの気象データの機能のみをサポートしています。
  

概要: Amap API からデータを取得し、それを Tencent Map の地図に更新します。実際、Tencent Map は現在でも使用されていますが、データのソースは Amap から来ています。

Gaode からデータを取得し、Tencent Maps のキャンバス上に電子フェンスを描画するだけです。

ただし、一部の特別なシーン、座標点の選択、住所検索などはすべて Tencent コンポーネント内にカプセル化されているため、Amap に基づいて実装するのは困難です。

座標系について

• Gaode マップ、Tencent マップ、Google China マップはGCJ-02座標系を使用します

• Baidu マップはBD-09座標系を使用します

• GPS デバイスを介して基礎となるインターフェイス (HTML5 Geolocation または iOS および Android API) によって取得される座標は、WGS-84座標系を使用します。

異なるプラットフォームによって取得された緯度と経度の情報は、同じ座標系にない可能性があります。

• 座標系は次のように分割されます。

  • GCJ-02 - 国家測量座標局

中国本土のすべての公開地理データは、少なくとも GCJ-02** で暗号化する必要があります。これは、国内企業の製品から取得するデータを暗号化する必要があることを意味します。

Amap、Tencent Map、Google China Map

• BD-09 - 百度座標系

これは、Baidu Maps で使用される地理座標系であり、ユーザーのプライバシーを保護するために GCJ-02 にもう 1 つの変換を追加します。Baidu 製品から取得される座標はすべて BD-09 座標系です。

百度地図

• WGS-84 - 世界測地系

世界で最も広く使われている座標系であり、世界座標系であり、GPS 装置によって取得される経度および緯度は、WGS84 座標系における経度および緯度になります。

通常、基礎となるインターフェイスを通じて取得される位置情報は、WGS84 座標系です。

• 座標変換

  • Baidu Maps と Amap は両方とも、異なる座標系の座標を変換するいくつかの方法を提供していますが、それらはすべてネットワーク リクエストを必要とし、パフォーマンスが低くなります。
  1. gcoord

  gcoord は主に 2 つの問題を解決します

  • 異なる座標系で座標を相互に変換できます

  • 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などのオープン ソース ライブラリを使用できます。

高道徳マップはプロジェクトで参照されています

注：Baidu地図とGaodeの導入方法は、Baiduのプラグインを導入するだけでほぼ完了ですBaidu公式サイト

1. WeChat アプレット プラグインをダウンロードしてインストールします。

• amap-wx.js

  作成したプロジェクトに libs という名前の新しいディレクトリを作成し、amap-wx.js ファイルを libs のローカル ディレクトリにコピーします。

  

2. 安全な通信ドメイン名を設定する

• 修正リクエスト Gaode ドメイン名: https://restapi.amap.com

3. amap-wx.js ファイルをindex.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>

上記は、ミニ プログラムへの Amap/Baidu 地図座標系の導入についての詳細な説明です。読んでいただきありがとうございます。
他の問題が発生した場合は、個人的に私と話し合って学ぶことができます。
お役に立てば、よろしくお願いします。あなたのコレクションに追加してください点赞。ありがとうございます~!
お気に入りのブロガーに注目して、更新を続けます...