Cómo llamar a la API de mapas de Baidu en una página web

1. Ingrese: /wiki/static/map/API/tool/creatMap/ (Cree un mapa: herramienta WYSIWYG de Baidu Map API, dirección oficial de Baidu, puede usarlo con confianza)

Cambie la ciudad y marque la ubicación durante la búsqueda. (Como se muestra a continuación:)

Configurar el mapa: puede configurar el ancho y el alto del mapa que se muestra en el sitio web, y las otras opciones permanecen sin cambios.

Añadir una marca: Después de hacer clic en el primer icono, busque su posición en el lado derecho y haga clic con el botón izquierdo del ratón para localizarla. La forma del ícono se puede cambiar en el ícono marcado, y el nombre y los comentarios se pueden completar con información relacionada con la ubicación. (Como se muestra a continuación:)

Lectura de pasos

Después de completar los 4 pasos anteriores, haga clic en Obtener código.

El código de adquisición es el siguiente: (Nota: normalmente solo necesitamos insertar el siguiente código en la página web y marcarlo, y el resto no es necesario).

1 En lt; headgt; lt Inserte el siguiente código entre ;/headgt;: Este es el estilo y el script JS.

lt;!--Citando Baidu Map API--gt;

lt; style type="text/css"gt;

html, body{ margen: 0; relleno: 0; }

.iw_poi_title {color: #CC5522; tamaño de fuente: 14px; espacio en blanco: negrita; nowrap}

.iw_poi_content {fuente: 12px arial, sans-serif; desbordamiento: visible; padding-top: 4px; espacio en blanco: -moz-pre-wrap;

lt;/stylegt;

lt;script type="text/javascript" src="/api?key=amp;v=1.1amp;services=true"gt; lt;/scriptgt;

2. Coloque el siguiente código en la ubicación donde se debe mostrar el mapa entre lt;bodygt;lt;/bodygt;: (Este código llama al mapa)

lt;!--Contenedor de mapas Baidu--gt;

lt; div style="ancho: 697px; alto: 550px; borde: #ccc solid 1px;" ; lt; /divgt ;

3. Coloque el siguiente código en la parte inferior de la página (en realidad, se puede colocar en cualquier parte de la página).

)

lt;script type="text/javascript"gt;

//Crear e inicializar la función de mapa:

función initMap(){

createMap(); //Crear un mapa

setMapEvent(); //Establecer un evento de mapa

addMapControl() //Agregar un control al mapa

addMarker(); //Añadir marcador al mapa

}

//Crear función de mapa:

function createMap(){

var map = new BMap.Map("dituContent"); //Crea un mapa en el contenedor de mapas de Baidu

var point = new BMap.Point(115.949652, 28.693851); //Definir las coordenadas del punto central

map.centerAndZoom(point, 18); //Establecer el punto central y las coordenadas del mapa y mostrar el mapa en el contenedor del mapa

ventana .map = map; //Almacenar variables de mapa globalmente

}

//Función de configuración de eventos de mapa:

function setMapEvent(){

map .enableDragging(); //Habilitar eventos de arrastre de mapas, habilitado de forma predeterminada (opcional)

map.enableScrollWheelZoom() //Habilitar la rueda de desplazamiento del mapa para acercar y alejar

map.enableDoubleClickZoom( ); //Habilita hacer doble clic con el mouse para acercar, habilitado de forma predeterminada (opcional)

map.enableKeyboard(); //Habilita el teclado arriba, abajo, izquierda y teclas derechas para mover el mapa

}

//Añadir función al control del mapa:

function addMapControl(){

// Agregar control de zoom al mapa

var ctrl_nav = new BMap.NavigationControl ({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE}

map.addControl(ctrl_nav

var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});

map.addControl(ctrl_ove);

//Añadir un control de escala al mapa

var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});

map.addControl(ctrl_sca );

}

// Matriz de puntos de etiqueta

var MarkerArr = [{title: "Baiheng Network", contenido: "Tel: 0791-88117053lt; br/gt; Móvil: 15079002975", punto: "115.950312|28.693447", isOpen: 1, icon : {w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12}}

]

//Crear marcador

función addMarker(){

for(var i=0; ilt; marcadorArr.length; i ){

var json = marcadorArr[i];

var p0 = json.point.split("|")[0];

var p1 = json.point.split("|")[1]; p> var punto = nuevo BMap.Point(p0, p1);

var iconImg = createIcon(json.icon);

var marcador = nuevo BMap.Marker(punto, { icon:iconImg});

var iw = createInfoWindow(i);

var label = new BMap.Label(json.title, {"offset": new BMap.Size ( json.icon.lb-json.icon.x 10,-20)});

marcador.setLabel(etiqueta);

map.addOverlay(marcador);

p>

label.setStyle({

borderColor: "#808080",

color: "#333",

cursor : "puntero"

});

(función(){

var index = i;

var _iw = createInfoWindow( i);

var _marker = marcador;

_marker.addEventListener("click", function(){

this.openInfoWindow(_iw);

});

_iw.addEventListener("open", function(){

_marker.getLabel().hide();

})

_iw.addEventListener("cerrar", función(){

_marker.getLabel().show();

})

label.addEventListener("clic", función(){

_marker.openInfoWindow(_iw );

})

if(!!json.isOpen){

label.hide();

_marker.openInfoWindow (_iw);

}

})()

}

}

//Crear ventana de información

function createInfoWindow(i){

var json = marcadorArr[i]

var iw = new BMap.InfoWindow("lt; b class=' iw_poi_title' title='" json.title "'gt;" json.title "lt;/bgt;lt;div class='iw_poi_content'gt;" json.content "lt;/divgt;");

return iw;

}

//Crear un icono

function createIcon(json){

var icon = new BMap.Icon("/image/us_cursor.gif", nuevo BMap.Size(json.w, json.h), {imageOffset: nuevo BMap.Size(-json.l, -json.t), infoWindowOffset: nuevo BMap .Size(json.lb 5, 1), desplazamiento: nuevo BMap.Size(json.x, json.h)})

icono de retorno

}

initMap();//Crea e inicializa el mapa

lt;/scriptgt;

Por supuesto, si quieres ser vago, coloca todos los códigos correspondientes anteriores en el bodygt; lt;/bodygt;No hay problema, jaja.