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

</style>

& ltscript type = " text/JavaScript " src = "/API?key = & ampv=1.1.services = true " & gt& lt/script & gt;

2. en

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

& ltdiv style = " ancho: 697 px; alto: 550px borde: # CCC sólido 1px; "id="dituContent " >& lt/div & gt; /p>

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

& ltscript type = "text/JavaScript" >

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

Función initMap(){

create map() //Crear mapa

setMapEvent (); //Establecer eventos del mapa

addMapControl(); //Agregar controles al mapa

add Marker() //Agregar marcadores al mapa

}

//Crear función de mapa:

Función createMap(){

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

var punto = nuevo BMap. Point(115.949652, 28.69851); //Definir las coordenadas de un punto central.

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

window.map = map//Almacenar globalmente variables del mapa.

}

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

Función setMapEvent(){

mapa habilitar arrastrar(); Habilite eventos de arrastre de mapas, habilitado de forma predeterminada (opcional).

map . enablescrollwheelzoom(); //Habilita la rueda de desplazamiento del mapa para acercar y alejar.

map . enableoubleclickzoom(); //Habilitar doble clic con el mouse para acercar, habilitado de forma predeterminada (opcional).

map . enable teclado(); //Habilita el teclado para mover el mapa hacia arriba, abajo, izquierda y derecha.

}

//Agregar función al control del mapa:

Función addMapControl(){

//Agregar control de zoom al mapa

var ctrl_nav = nuevo BMap. CONTROL DE NAVEGACIÓN({ ANCHOR:BMAP_ANCHOR_TOP_LEFT, type:BMAP_navigation_control_large});

map add control(ctrl_nav);

//Agrega un control de miniatura al mapa

var ctrl_ove = nuevo BMap. descripción general mapcontrol({ ANCHOR:BMAP _ ANCHOR _ BOTTOM _ RIGHT, iso pen: 1 });

map add control(ctrl _ ove); control de escala del mapa

var ctrl_sca = nuevo BMap. control de escala ({ ANCHOR:BMAP _anchor_bottom_left});

mapa agregar control(ctrl_SCA);

}

// Matriz de puntos de etiqueta

Var marcadorArr = [{título: "Baiheng Network", contenido: "Teléfono: 0791-88117053

];

/ /Crear marcador

Función addMarker(){

for(var I = 0;i<marker rarr.length;i++){

var JSON = marcador arr[I];

var P0 = JSON . punto . split(" | "[0];

var p 1 = JSON . punto . split(" | "[1 ];

var punto =. nuevo BMap.point(p0, p 1);

var icono mg = crear icono(JSON . icono

var etiqueta = nuevo BMap (punto, { icono: icon mg });

var iw = crear ventana de información(I);

var label = new BMap.

size(JSON . icon . l b-JSON . icon . x+10, -20)});

marker.setLabel(label);

map . );

label.setStyle({

color del borde: "# 808080",

Color: "#333",

Cursor: "puntero"

});

(función(){

var index = I;

var _ iw = crear ventana de información (I);

var _ marcador = marcador

_ marcador addevent listener(" clic ", función(){

this . openinfowindow. (_ iw);

});

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

_marker.getLabel().hide() ;

})

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

_marker.getLabel().show();

})

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

_ marcador . openinfowindow(_ iw);

})

If (!!json.isOpen){

etiqueta . hide();

_ marcador . >}

})()

}

}

//Crear ventana de información

Función createInfoWindow (i){

var JSON = marcador arr[I];

var iw = nuevo BMap. Ventana de información (" & ltb class = ' iw _ poi _ title ' title = ' "+JSON . title+" ' & gt+JSON . title+" & lt;/b & gt; & ltdiv class='iw_poi_content ' >+JSON .content+"</div>");

Regresar iw;

}

//Crear icono

Función createIcon( json){

icono var = nuevo BMap. Icono ("/image/us_cursor.gif ", nuevo BMap. Tamaño (json.w, json.h), {imageOffset: nuevo BMap. Tamaño (-json.l, -json.t), infoWindowOffset: nuevo BMap. Tamaño (json.lb+5, 1), desplazamiento: nuevo BMap (json.x, json.h)})

Icono de retorno;

}

init map();//Crea e inicializa el mapeo

& lt/script & gt;

Por supuesto, si quieres ser vago, solo coloca el código correspondiente arriba < body & gt& lt/body & gt; A veces no hay problema, jaja.