¿Cómo insertar tu propia área pequeña en una página web?
Abra la URL: página de inicio de Baidu Map (¿cómo abrirla? ¡¡¡Los amigos pueden buscar Baidu Map directamente en Baidu !!!), desplácese hasta el final de la página y encuéntrelo en " Complementos y herramientas" columna "Generador de mapas rápidos".
El segundo paso es crear un mapa
1. Localiza el punto central. Simplemente colóquese de acuerdo con su situación real.
2. Configurar el mapa. Simplemente establezca el ancho y alto apropiados según su situación real.
3. Añade coordenadas. Agregue marcadores de puntos, marcadores de líneas y marcadores de texto según corresponda.
Paso 3
Simplemente haga clic en el botón "Obtener código".
Paso 4
Simplemente agregue el código a la ubicación apropiada en el código fuente de su sitio web.
La referencia del código es la siguiente:
Inserte el siguiente código en
; </head>: Este es el estilo y el script JS.<! -Citar Baidu Map API->
& lt estilo? type="text/css "
html, cuerpo { margen: 0; relleno: 0 }
. iw_poi_title? { color: # cc 5522; tamaño de fuente: 14px; peso de fuente: negrita; desbordamiento: oculto; relleno-derecha: 13px; espacio en blanco: nowrap}
. iw_poi_content? {fuente:12px? arial, sans serif; desbordamiento: visible; padding-top: espacio en blanco de 4px: -moz-pre-wrap; ajuste automático: envoltura}
& lt/style>
& ¿Es guión? tipo="texto/javascript "? src="/api?key=&v=1.1.services=true "></script>
2 en
<! -Contenedor de mapas de Baidu->
<div? estilo = "ancho: 697 px; alto: 550 px borde: #ccc? sólido? 1px; "? id="dituContent " ></div>
3. El siguiente código se coloca en la parte inferior de la página (de hecho, se puede colocar en cualquier lugar de la página).
<Script? type = " text/JavaScript ">
//Crear e inicializar la función de mapeo:
¿Función? initMap(){
create map(); //Crear mapa
setMapEvent(); //Establecer evento de mapa
addMapControl(); Mapa agregar control
add Marker(); //Agregar marcadores al mapa
}
//Crear función de mapa:
Función ? crearMapa(){
var? ¿mapa? =?Nuevo? BMapa. map(" ditu content "); //Crea un mapa en el contenedor de mapas de Baidu.
var? ¿punto? =?Nuevo? BMapa. 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.
ventana.mapa? =?Map; //Almacenar globalmente variables del mapa.
}
//Función de configuración de eventos del mapa:
¿Función? setMapEvent(){
map . enable dragging(); //Habilitar 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 funciones al control del mapa:
¿Función? addMapControl(){
//Agregar un control de zoom al mapa
var? ctrl_nav? =?Nuevo? BMapa. 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? BMapa. descripción general mapcontrol({ ANCHOR:BMAP _ ANCHOR _ BOTTOM _ RIGHT, iso pen: 1 });
map add control(ctrl _ ove); mapa Control de escala
var? ¿ctrl_sca? =?Nuevo? BMapa. 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: 0791-88117053 < br/>; Móvil: 1507 9002975", punto: "115.950312 | 28.693447", ISOpen: 1, icono: {w: 23, h : 25,
];
//¿Crear función de marca
? addMarker(){
for(var?I = 0;i<marker rarr.length;i++){
var? json? =?marcador rarr[I];
var? ¿p0? =?JSON . punto . split(" | "[0];
var?p1?=?JSON . punto . split(" | "[1];
var? dot? =? BMap.point(p0,p1); var?iconImg? =?new? BMap.mark(punto,{icon mg});
var?=?crear ventana de información(I) ;
var? =?nuevo?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?=?marker;
_marker. addevent listener(" clic ", función(){ /p>
this . openinfowindow(_ iw);
});
_iw.addEventListener("abrir", función(){
_marker.getLabel() ;
})
_iw.addEventListener("cerrar ", función(){
_marker.getLabel() .show();
})
label.addEventListener("hacer clic ", función(){
_ marcador . openinfowindow(_ iw);
})
if (!!json.isOpen){
etiqueta . hide();
_ marcador openinfowindow(_ iw);
}
})()
}
}
//Crear una ventana de información
Función ? Crear ventana de información(i){
var? json? =?marcador rarr[I];
var? ¿yo? =?Nuevo? BMapa. Ventana de información (" & ltb? class='iw_poi_title '? title= ' "?+?json.title?+?"& gt"?+?json.title?+?"& lt/b & gt; & ltdiv? class = 'iw _ poi _ content ' & gt"+JSON . content+" </div & gt;");
¿Regresión? iw;
}
//Crear icono
¿Función? createIcon(json){
var? ¿icono? =?Nuevo? BMapa. icon("/image/us_cursor.gif", nuevo?BMap.Size(json.w, json.h), {imageOffset:?new?BMap.Size(-json.l, -json.t), infoWindowOffset:nuevo BMap.Size(json.lb+5, 1), desplazamiento: nuevo BMap.Size(json.x, json.h)})
¿Volver? icon;
}
init map(); //Crea e inicializa el mapa
& lt/script & gt;
Por supuesto, si quieres ser vago, simplemente coloca el código correspondiente arriba en