Explicación detallada de la introducción del sistema de coordenadas del mapa Gaode/Baidu en el miniprograma
Hora de la última actualización del sitio web oficial: Hora de la última actualización:2021年08月17日
-
Enlace de preguntas frecuentes del sitio web oficial de AutoNavi para su uso en miniprogramas nativos
-
Actualmente, el uso de Amap en el mini programa solo admite las siguientes funciones: descripción de direcciones, puntos de interés y datos meteorológicos en tiempo real.
Resumen: Obtenga datos de la API de Amap y luego actualícelos al mapa de Tencent Map. De hecho, Tencent Map todavía se usa, pero la fuente de los datos proviene de Amap.
Simplemente podemos obtener los datos de Amap y luego dibujar la valla electrónica en el lienzo de Tencent Maps.
Sin embargo, algunas escenas especiales, selección de puntos de coordenadas, búsqueda de direcciones, etc. están encapsuladas dentro de los componentes de Tencent, por lo que es difícil de implementar en función de Amap.
Sobre el sistema de coordenadas
-
Amap, Tencent Maps y Google China Maps utilizan el sistema de coordenadas GCJ-02
-
El mapa de Baidu utiliza el sistema de coordenadas BD-09.
-
Las coordenadas obtenidas por la interfaz subyacente (Geolocalización HTML5 o API de ios y Android) a través del dispositivo GPS utilizan el sistema de coordenadas WGS-84 .
Es posible que la información de latitud y longitud obtenida por diferentes plataformas no esté en el mismo sistema de coordenadas.
-
El sistema de coordenadas se divide en:
- GCJ-02 - Oficina Nacional de Topografía de Coordenadas
Todos los datos geográficos públicos en China continental deben cifrarse con al menos GCJ-02**, lo que significa que los datos que obtenemos de los productos de las empresas nacionales deben estar cifrados.
Amap, Tencent Map y Google China Map
- BD-09 - Sistema de coordenadas de Baidu
Es el sistema de coordenadas geográficas utilizado por Baidu Maps y agrega una transformación más a GCJ-02 para proteger la privacidad del usuario. Las coordenadas obtenidas de los productos Baidu son todas del sistema de coordenadas BD-09.
mapa de Baidu
- WGS-84 - Sistema Geodésico Mundial
Es el sistema de coordenadas más utilizado y un sistema de coordenadas universal en el mundo. La longitud y latitud obtenidas por el dispositivo GPS son la longitud y latitud bajo el sistema de coordenadas WGS84.
Normalmente la información de posicionamiento obtenida a través de la interfaz subyacente es el sistema de coordenadas WGS84.
-
Transformación de coordenadas
- Tanto Baidu Maps como Amap proporcionan algunos métodos para convertir coordenadas en diferentes sistemas de coordenadas, pero todos requieren solicitudes de red y tienen un rendimiento deficiente.
- coordinación
gcoord resuelve principalmente dos problemas
-
Las coordenadas se pueden convertir entre sí en diferentes sistemas de coordenadas.
-
Capaz de manejar GeoJSON
-
Ejemplo: conversión del sistema de coordenadas WGS-84 al sistema de coordenadas BD-09
var result = gcoord.transform( [ 116.403988, 39.914266 ], // 经纬度坐标 gcoord.WGS84, // 当前坐标系 gcoord.BD09 // 目标坐标系 ); console.log( result ); // [ 116.41661560068297, 39.92196580126834 ]Para un uso detallado, consulte la documentación de gcoord.
Para obtener herramientas de procesamiento de sistemas de coordenadas más profesionales, puede utilizar bibliotecas de código abierto como proj4js .
El mapa de alta moral está referenciado en el proyecto.
Nota: Los métodos de introducción de Baidu Map y Amap son casi los mismos, lo que es necesario presentar es el complemento del sitio web oficial de Baidu.
1. Descargue e instale el complemento del subprograma WeChat
-
amap-wx.js
En el proyecto creado, cree un nuevo directorio llamado libs y copie el archivo amap-wx.js al directorio local de libs.
2. Establezca el nombre de dominio de comunicación segura
- Solicitud fija de nombre de dominio AMAP: https://restapi.amap.com
3. Introduzca el archivo amap-wx.js en index.js
var amapFile = require('path/to/amap-wx.js');//如：../../libs/amap-wx.js
- JS llama a la 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>
Lo anterior es una explicación detallada de la introducción del sistema de coordenadas del mapa Amap/Baidu en el mini programa. Gracias por leer.
Si encuentra otros problemas, puede discutirlo y aprender conmigo en privado.
Si le resulta útil, por favor añádelo 点赞a tu colección. ¡Gracias~!
Presta atención a los bloggers favoritos y seguiremos actualizando...