Explication détaillée de l'introduction du système de coordonnées cartographiques Gaode/Baidu dans le mini programme

Heure de la dernière mise à jour du site officiel : Heure de la dernière mise à jour :2021年08月17日

Lien FAQ du site Web officiel d'AutoNavi à utiliser dans les mini-programmes natifs
Actuellement, l'utilisation d'Amap dans le mini programme ne prend en charge que les fonctions suivantes : description de l'adresse, POI et données météorologiques en temps réel.

Résumé : Obtenez les données de l'API Amap, puis mettez-les à jour vers la carte de Tencent Map. En fait, Tencent Map est toujours utilisé, mais la source des données provient d'Amap.

Nous pouvons simplement obtenir les données d'Amap puis dessiner la clôture électronique sur la toile de Tencent Maps

Cependant, certaines scènes spéciales, sélection de points de coordonnées, recherche d'adresse, etc. sont toutes encapsulées dans les composants Tencent, il est donc difficile de les mettre en œuvre sur la base d'Amap.
![Insérer la description de l'image ici](https://img-blog.csdnimg.cn/84fe2b2ccb2d40dcbd8b751250f85617.png

À propos du système de coordonnées

Amap, Tencent Maps et Google China Maps utilisent le système de coordonnées GCJ-02
Baidu Maps utilise le système de coordonnées BD-09
Les coordonnées obtenues par l'interface sous-jacente (Géolocalisation HTML5 ou API ios et Android) via l'appareil GPS utilisent le système de coordonnées WGS-84 .

Les informations de latitude et de longitude obtenues par différentes plates-formes peuvent ne pas se trouver dans le même système de coordonnées.

Le système de coordonnées est divisé en :
- GCJ-02 - Bureau national des coordonnées d'arpentage

Toutes les données géographiques publiques en Chine continentale doivent être cryptées avec au moins GCJ-02**, ce qui signifie que les données que nous obtenons des produits des entreprises nationales doivent être cryptées.

Amap, Tencent Map et Google China Map

BD-09 - Système de coordonnées Baidu

Il s'agit du système de coordonnées géographiques utilisé par Baidu Maps. Il ajoute une transformation supplémentaire au GCJ-02 pour protéger la confidentialité des utilisateurs. Les coordonnées obtenues à partir des produits Baidu sont toutes le système de coordonnées BD-09.

Carte de Baidu

WGS-84 - Système géodésique mondial

Il s'agit du système de coordonnées le plus largement utilisé et d'un système de coordonnées universel au monde. La longitude et la latitude obtenues par l'appareil GPS sont la longitude et la latitude sous le système de coordonnées WGS84.

Habituellement, les informations de positionnement obtenues via l'interface sous-jacente sont le système de coordonnées WGS84.

Transformation de coordonnées
- Baidu Maps et Amap fournissent tous deux des méthodes pour convertir des coordonnées dans différents systèmes de coordonnées, mais elles nécessitent toutes des requêtes réseau et ont des performances médiocres.
1. gcoord
gcoord résout principalement deux problèmes
- Possibilité de convertir des coordonnées entre elles dans différents systèmes de coordonnées
- Capable de gérer GeoJSON
- Exemple - Conversion du système de coordonnées WGS-84 au système de coordonnées BD-09
```
var result = gcoord.transform(
    [ 116.403988, 39.914266 ],    // 经纬度坐标
    gcoord.WGS84,                 // 当前坐标系
    gcoord.BD09                   // 目标坐标系
);
console.log( result );  // [ 116.41661560068297, 39.92196580126834 ]
```
Pour une utilisation détaillée, veuillez consulter la documentation de gcoord.
Pour des outils de traitement de systèmes de coordonnées plus professionnels, vous pouvez utiliser des bibliothèques open source telles que proj4js .

Amap citée dans le projet

Remarque : Les méthodes d'introduction de Baidu Map et d'Amap sont presque les mêmes. Ce qui doit être introduit, c'est le site officiel du plug-in Baidu de Baidu.

1. Téléchargez et installez le mini plug-in du programme WeChat

amap-wx.js

Dans le projet créé, créez un nouveau répertoire nommé libs et copiez le fichier amap-wx.js dans le répertoire local de libs

2. Configurez un nom de domaine de communication sécurisé

Demande fixe de nom de domaine AMAP : https://restapi.amap.com

Insérer la description de l'image ici

3.Introduisez le fichier amap-wx.js dans index.js

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

JS appelle l'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>

Insérer la description de l'image ici

Ce qui précède est une explication détaillée de l'introduction du système de coordonnées cartographiques Amap/Baidu dans le mini-programme. Merci d'avoir lu.
Si vous rencontrez d'autres problèmes, vous pouvez discuter et apprendre avec moi en privé.
Si cela vous est utile, veuillez ajoutez-le 点赞à votre collection. Merci ~ !
Suivez l'auteur du blog préféré pour des mises à jour continues...