¿Cuál es el principio que se muestra en la aplicación? ¿Fue importado de Baidu y otro software? ¿También se importa en una aplicación?
Portátil
Hay muchas empresas que proporcionan servicios de API de mapas, incluidas GoogleMap y OpenStreetMap en el extranjero, y Baidu Maps, Tencent Maps y Amap en China. Google Maps no se puede utilizar correctamente por algunas razones, así que no lo selecciono. Lo primero que consideré fue OpenStreetMap, porque es el más bonito después de Google Map y Zillow: bienes raíces, apartamentos, hipotecas y valores familiares estadounidenses también.
Se utiliza y el efecto del mapa es muy bueno. . En esta era de mirar caras, la apariencia es demasiado importante. Hay muchas bibliotecas de desarrollo que admiten OpenSteetMap, pero todas fueron abandonadas después de los experimentos.
OpenStreetMap es más adecuado para ciudades extranjeras, pero los mapas de China no son lo suficientemente detallados. Las tres empresas nacionales, Baidu Maps, Tencent Maps y Amap, tienen una estética similar. Los dos primeros son importantes, ¿no?
Me preocupan los cambios en la política de productos. Baidu Maps tiene muchas API de terceros y se han encontrado algunas funciones esperadas en las API de terceros, lo que tiene más ventajas. Belleza, usabilidad duradera y riqueza de API de terceros.
Desde estos tres aspectos, Baidu Maps es el mejor del país. La cantidad de API y desarrolladores de terceros tiene un efecto de interés compuesto. Una vez que se excede el umbral, será difícil para otros alcanzarlo.
Como se mencionó anteriormente, el backend es el Tornado. Baidu Map está incrustado en la página, el código es javascript y está escrito en html en la interfaz.
Primero, inserte Baidu Maps en la página web. Crea un archivo x.html con el siguiente contenido:
<! DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltmeta /api? v=2.0&Ak=YourKey"></script>
& lttitle>Hola</title>
& ltstyle type=" text/css "
cuerpo, html, # todo el mapa { ancho: 100%; alto: 100%; desbordamiento: oculto; margen: }
& lt/ estilo & gt;
& lt/head & gt;
& ltbody & gt
& ltdiv id = " allmap " & gt& lt/div & gt ;
& lt/body & gt;
& lt/html & gt;
& ltscript type = " texto/JavaScript " & gt;
& lt/html & gt; p>/* *Función API de mapas de Baidu* */
var map = new BMap.(" all map "); //Crear una instancia de mapeo
var point = new BMap. point(116.404, 39.915); //Crear coordenadas de puntos
map.centerAndZoom(point, 15); //Inicializar el mapa, establecer las coordenadas del punto central y el nivel del mapa.
p >var marcador1 = new BMap.marker(new BMap.point(116.384, 39.925)); //Crear una etiqueta
map.add overlay(marker 1); tag
& lt/script & gt;
Este ejemplo es una pequeña modificación de Baidu Demo.
Debe registrarse en el sitio web oficial antes de utilizar la API de Baidu y obtendrá una después del registro.
La clave de cadena de 24 bits utilizada para reemplazar "su clave" arriba. En este html, primero defina un elemento div llamado "allmap" y luego créelo con javascript.
Mapea, crea coordenadas, establece el centro del mapa y el nivel de zoom, y luego crea marcadores en el mapa. La llamada marca es un icono con una parte inferior puntiaguda y una cabeza redonda que indica la ubicación.
Sí,
Si arrastra el mapa, el front-end calculará la longitud y latitud del rectángulo donde se encuentra el nuevo mapa, y luego usará ajax para llamar al backend del tornado. según los valores de longitud y latitud para obtener los mejores restaurantes dentro del rango rectangular de longitud y latitud de las letras.
Información, incluyendo la longitud y latitud del restaurante, el nombre y dirección del restaurante, etc. , dibuja el restaurante en el mapa actual. Cuando pasas el cursor sobre un restaurante, aparecerá un pequeño cuadro en el mapa que muestra el nombre del restaurante. Haga clic en el restaurante y el navegador.
La página del restaurante se abrirá en Dianping.com. Si pasa el mouse sobre el nombre del restaurante a la derecha, aparecerá un pequeño cuadro en el mapa de la izquierda que muestra el nombre del restaurante.
En cuanto al tono ajax,
usa tornado backend y jquery. Por ejemplo, cree una ruta URL "/getshopmarkers" en el backend de tornado y luego implemente una fiesta de publicación.
Método, este método consulta información del restaurante de la base de datos según la longitud y latitud rectangulares, y luego devuelve los resultados de la consulta usando json. Luego, el método de llamada ajax del front-end es:
<. p>var publicación = $. post("/getshopmarkers",{"lng_min":bssw.lng,"lng_max":bsne.lng,"lat_min":bssw.lat,"lat_max":bsne.lat,"_xsrf":get_cookie(" _ xsrf " )});posting.done(function(data){
var data obj = eval("+data+");
var allshopnum = data obj[0][" allshopnum "];
data obj . shift();
//Generar etiquetas
for(data obj Variable x){
LNG = parse float(data obj[x][" LNG "]);
lat = parse float(data obj[x][" lat " ]); p>
var p = nuevo BMap.point(lng, lat
...
}
$ ("#mp_content ") .html(nuevo contenido);
});
posting.fail(function(){
alert("Error: No se puede actualizar la marca. " );
});
El uso de Baidu Map se simplifica en dos códigos básicos. En general, no es demasiado difícil para los estudiantes de front-end usar Baidu Maps, principalmente lleva tiempo.
Familiarícese con las API y luego diseñe cómo utilizarlas para crear efectos útiles. La API oficial solo puede garantizar la disponibilidad de funciones, pero no la belleza y la frescura. En casos excepcionales encontrarás la API oficial.
Error, el código fuente no se proporciona en Baidu Maps, por lo que solo puedes omitir o cambiar el diseño. Para la interfaz, el diseño, el arte, la optimización de la velocidad, la compatibilidad del navegador, no hay fin. Un viaje de mil millas comienza con un solo paso.
Baja.