Red de conocimiento informático - Material del sitio web - Cómo insertar su propio mapa de área pequeña en una página web

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;}

.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:

function?initMap(){

createMap();//crear mapa

setMapEvent();//establecer eventos de mapa

addMapControl (); //agregar controles al mapa

addMarker();//agregar marcador al mapa

}

//función createMap:

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];

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?+?" "+?json.content+"

");

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;

上篇: ¿Cómo ver los álbumes de fotos del blog NetEase de otras personas? 下篇: ¿Cuál de los héroes de la dinastía Tang, Shaolin, es mejor?