Cómo insertar su propio mapa de área pequeña en una página web
El primer paso
Abra la URL: página de inicio de Baidu Map (¿cómo abrirla? Amigos, ¡simplemente busquen Baidu Map en Baidu!) Pueden ubicarlo de acuerdo con su situación real.
2. Configurar el mapa. De manera similar, puede establecer 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 la situación real
Paso 3
Haga clic directamente en el botón "Obtener código".
Paso 4
Agregue el código a la ubicación adecuada en el código fuente del sitio web.
La referencia del código es la siguiente: Inserte el siguiente código entre
: Este es el estilo y el script JS.html,body{margin:0;padding:0;} p >
.iw_poi_title?{color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
. iw_poi_content ?{font:12px?arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
< / estilo>
2. Coloque el siguiente código en
donde se debe mostrar el mapa: (Este código llama al mapa)3. la página (De hecho, se puede colocar en cualquier lugar de la página)
/Crear e inicializar la función de mapa: p>
function?initMap(){
createMap();//crear mapa
setMapEvent();//establecer eventos de mapa
addMapControl (); //agregar controles al mapa
addMarker();//agregar marcador al mapa
}
//función createMap: p>
function?createMap(){
var?map?=?new?BMap.Map("dituContent");//Crear 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 colocarlos en el mapa Mostrar el mapa en el contenedor
window.map?=?p>
map.enableScrollWheelZoom();//Enable ScrollWheelZoom
map.enableKeyboard();/ /Habilita las teclas arriba/abajo/derecha/izquierda/izquierda del teclado para mover el mapa
}
//Función de agregar control de mapa:
function?addMapControl( ){
//Agregar control de zoom al mapa
var?BMap.NavigationCo
ntrol({anchor:BMAP_ANCHOR_TOP_LEFT,type. BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//Agregar control de miniaturas al mapa
var ?OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
Agregar control de zoom al mapa
var? ctrl _sca?=?new?BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
// Etiqueta Matriz de puntos
var?markerArr?=?{title:"Baiheng Network",content:"Tel:0791-88117053
Móvil:15079002975",point: "115.950312|28.693447",isOpen: 1,icono:{w:23,h:25,l:46,t:21 ,x:9,lb:12}} ];
//createmarker
función ?addMarker(){
for(var?i=0;i var?json?=?markerArr[i]; p > var?p0?=?json.point.split("|")[0]; var?p1?=?json.point.split("|")[1 ] ; var?iconImg?=?createIcon(json.icon); var?marker?=?new?BMap.Marker(point,{icon:iconImg}); ?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); label.setStyle({ borderColor: "# 808080", color: "#333", cursor: "puntero" }); (función(){ var ?index ?=?i; var?_w?=?createInfoWindow(i); var?_marker?=?marker; _marker.addEventListener (" haga clic",función(){ this.openInfoWindow(_iw); }); _iw.addEventListener("open",función(){ _marker.getLabel() .hide (); }) _iw.addEventListener("cerrar",función(){ _marker.getLabel().display(); }) laboratorio el.addEventListener("clic",function(){ _marker.openInfoWindow(_iw); }) if(!!json.isOpen){ label.hide(); _marker.openInfoWindow(_iw); }) If(!openInfoWindow(_iw); } })() } } //createInfoWindow función?createInfoWindow(i){ var?json ?=?markerArr[i]; var?iw?=?new?BMap.InfoWindow(""?+?json.title?+?"
retorno? iw;
}
/Crear un icono
function?createIcon(json){
var?icon?=?new? BMap.Icon("/image/us_cursor.gif",?new?BMap.Size(json.w,json.h),{imageOffset:?new?BMap.Size(-json.l,-json.t), infoWindowOffset:nuevo?BMap.Size(json.lb+5,1),offset:nuevo?BMap.Size(json.x,json.h)})
retorno?icono;