Ausführliche Erläuterung der Einführung des Gaode/Baidu-Kartenkoordinatensystems in das Miniprogramm
Offizielle Website, letzte Aktualisierungszeit:Letzte Aktualisierungszeit:2021年08月17日
-
FAQ- Link zur offiziellen AutoNavi-Website zur Verwendung in nativen Miniprogrammen
-
Derzeit unterstützt die Verwendung von Amap im Miniprogramm nur die folgenden Funktionen: Adressbeschreibung, POI und Echtzeit-Wetterdaten.
Zusammenfassung: Erhalten Sie Daten von der Amap-API und aktualisieren Sie sie dann auf die Karte von Tencent Map. Tatsächlich wird Tencent Map weiterhin verwendet, aber die Datenquelle stammt von Amap.
Wir können die Daten einfach von Amap beziehen und dann den elektronischen Zaun auf der Leinwand von Tencent Maps zeichnen
Einige spezielle Szenarien wie Koordinatenauswahl, Adresssuche usw. sind jedoch alle in Tencent-Komponenten gekapselt, sodass sie aus der Perspektive der Gaode-Karte schwer zu realisieren sind
Über das Koordinatensystem
-
Amap, Tencent Maps und Google China Maps verwenden das Koordinatensystem GCJ-02
-
Baidu Maps verwendet das BD-09- Koordinatensystem
-
Die von der zugrunde liegenden Schnittstelle (HTML5 Geolocation oder iOS- und Android-API) über das GPS-Gerät erhaltenen Koordinaten verwenden das WGS-84- Koordinatensystem .
Die von verschiedenen Plattformen erhaltenen Breiten- und Längengradinformationen befinden sich möglicherweise nicht im selben Koordinatensystem.
-
Das Koordinatensystem ist unterteilt in:
- GCJ-02 – Nationales Büro für Vermessungskoordinaten
Alle öffentlichen geografischen Daten auf dem chinesischen Festland müssen mindestens mit GCJ-02** verschlüsselt werden, was bedeutet, dass die Daten, die wir von den Produkten inländischer Unternehmen erhalten, verschlüsselt sein müssen.
Gaode-Karte, Tencent-Karte und Google China-Karte
- BD-09 – Baidu-Koordinatensystem
Es handelt sich um das von Baidu Maps verwendete geografische Koordinatensystem, das GCJ-02 eine zusätzliche Transformation hinzufügt, um die Privatsphäre der Benutzer zu schützen. Die von Baidu-Produkten erhaltenen Koordinaten liegen alle im BD-09-Koordinatensystem vor.
Baidu-Karte
- WGS-84 – Weltgeodätisches System
Es ist das am weitesten verbreitete Koordinatensystem und ein universelles Koordinatensystem der Welt. Der vom GPS-Gerät ermittelte Längen- und Breitengrad entspricht dem Längen- und Breitengrad des WGS84-Koordinatensystems.
Normalerweise liegen die über die zugrunde liegende Schnittstelle erhaltenen Positionierungsinformationen im WGS84-Koordinatensystem vor.
-
Koordinatentransformation
- Baidu Maps und Amap bieten beide einige Methoden zum Konvertieren von Koordinaten in verschiedene Koordinatensysteme, erfordern jedoch alle Netzwerkanforderungen und weisen eine schlechte Leistung auf.
- gcoord
gcoord löst hauptsächlich zwei Probleme
-
Möglichkeit, Koordinaten in verschiedenen Koordinatensystemen ineinander umzurechnen
-
Kann mit GeoJSON umgehen
-
Beispiel – Konvertierung vom WGS-84-Koordinatensystem in das BD-09-Koordinatensystem
var result = gcoord.transform( [ 116.403988, 39.914266 ], // 经纬度坐标 gcoord.WGS84, // 当前坐标系 gcoord.BD09 // 目标坐标系 ); console.log( result ); // [ 116.41661560068297, 39.92196580126834 ]Für eine detaillierte Verwendung lesen Sie bitte die Dokumentation von gcoord.
Für professionellere Koordinatensystem-Verarbeitungstools können Sie Open-Source-Bibliotheken wie proj4js verwenden.
Amap zitiert im Projekt
Hinweis: Die Einführungsmethoden von Baidu Map und Amap sind nahezu identisch. Was eingeführt werden muss, ist die offizielle Baidu-Plugin-Website von Baidu.
1. Laden Sie das WeChat Mini-Programm-Plug-in herunter und installieren Sie es
-
amap-wx.js
Erstellen Sie im erstellten Projekt ein neues Verzeichnis mit dem Namen libs und kopieren Sie die Datei amap-wx.js in das lokale Verzeichnis von libs
2. Richten Sie einen sicheren Kommunikationsdomänennamen ein
- Anforderung für AMAP-Domänennamen korrigiert: https://restapi.amap.com
3.Fügen Sie die Datei amap-wx.js in index.js ein
var amapFile = require('path/to/amap-wx.js');//如：../../libs/amap-wx.js
- JS ruft API auf
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>
Das Obige ist eine detaillierte Erklärung der Einführung des Amap/Baidu-Kartenkoordinatensystems in das Miniprogramm. Vielen Dank fürs Lesen.
Wenn Sie auf andere Probleme stoßen, können Sie diese privat mit mir besprechen und lernen.
Wenn es für Sie hilfreich ist, bitte Fügen Sie es 点赞Ihrer Sammlung hinzu. Vielen Dank~!
Folgen Sie dem Lieblingsblogautor für kontinuierliche Updates ...