介绍 & lt;脚本类型=拔谋?javascript"比;//创建和初始化地图函数:
函数initMap () {
createMap ();//创建地图
setMapEvent ();//设置地图事件
addMapControl ();//向地图添加控件
addMarker ();//向地图中添加标记
}//创建地图函数:
函数createMap () {
var=new BMap.Map地图(“dituContent");//在百度地图容器中创建一个地图
var=new BMap.Point点(106.54904,29.60076);//定义一个中心点坐标
地图。centerAndZoom(点、18);//设定地图的中心点和坐标并将地图显示在地图容器中
窗口。地图=地图;//将地图变量存储在全局
}//地图事件设置函数:
函数setMapEvent () {
map.enableDragging ();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom ();//启用地图滚轮放大缩小
map.enableDoubleClickZoom ();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard ();//启用键盘上下左右键移动地图
}//地图控件添加函数:
函数addMapControl () {//向地图中添加缩放控件
新BMap var ctrl_nav=avigationControl({锚:BMAP_ANCHOR_TOP_LEFT类型:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl (ctrl_nav);//向地图中添加缩略图控件
新BMap var ctrl_ove=verviewMapControl({主播:BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
map.addControl (ctrl_ove);//向地图中添加比例尺控件
新BMap var ctrl_sca=caleControl({主播:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl (ctrl_sca);
}//标注点数组
var markerArr=[{标题:“公司名称“,内容:“公司地址”,点:“106.549449 | 29.600407“,isOpen: 0,图标:{l h: w: 21日21日:0,t: 0, x: 6磅:5}}
];//创建标记
函数addMarker () {
(var=0;我& lt;markerArr.length;我+ +){
var json=markerArr[我];
var p0=json.point.split (“|”) [0];
var p1=json.point.split (“|”) [1];
var=new BMap点。点(p0, p1);
var iconImg=createIcon (json.icon);
var=new BMap标志。标记(点,{图标:iconImg});
var iw=createInfoWindow(我);
var标签=new BMap.Label (json。标题,{“offset":新BMap.Size (json.icon。磅——json.icon。x + -20)});
marker.setLabel(标签);
map.addOverlay(标记);
label.setStyle ({
borderColor:“# 808080“,
颜色:“# 333“,
光标:“pointer"
});
(函数(){
var指数=我;
var _iw=createInfoWindow(我);
var _marker=标记;
_marker.addEventListener (“click"、功能(){
this.openInfoWindow (_iw);
});
_iw.addEventListener (“open"、功能(){
_marker.getLabel () hide ();
})
_iw.addEventListener (“close"、功能(){
_marker.getLabel(),告诉();
})
label.addEventListener (“click"、功能(){
_marker.openInfoWindow (_iw);
})
如果(! ! json.isOpen) {
label.hide ();
_marker.openInfoWindow (_iw);
}
})()
}
}//创建InfoWindow
函数createInfoWindow(我){
var json=markerArr[我];
var iw=new BMap.InfoWindow (“& lt; b类=& # 39;iw_poi_title& # 39;title=& # 39;“+ json。标题+“& # 39;在“+ json。标题+“& lt;/b> & lt; p类=& # 39;iw_poi_content& # 39;在“+ json。内容+“& lt;/p>“);
返回信息战;
}//创建一个图标
函数createIcon (json) {
var=new BMap.Icon图标(“http://app.baidu.com/map/images/us_mk_icon.png",新的BMap.Size (json。w, json.h), {imageOffset:新BMap.Size (json。l, -json.t), infoWindowOffset:新BMap.Size (json。磅+ 5,1),抵消:新BMap.Size (json。x, json.h)})
返回图标;
}
initMap ();//创建和初始化地图
& lt;/script>
& lt; !——引用百度地图API——比;
& lt;风格类型=拔谋?css"比;
.iw_poi_title{颜色:# CC5522;字体大小:14 px;粗细:大胆;溢出:隐藏;padding-right: 13 px;空白:nowrap}}
.iw_poi_content{无衬线字体:12 px arial,溢出:可见;padding-top: 4 px;空白:-moz-pre-wrap;自动换行:break-word}
# dituContent p span.BMap_Marker。BMap_noprint{背景:url(& # 39;/图片/marker_red.png& # 39;) !重要;高度:26 px !重要;}
# dituContent .BMapLabel{背景颜色:白色;边界:0 px !重要;左:15 px !重要;字体大小:14 px !重要;粗细:大胆!重要;颜色:红色!重要;字体类型:& # 39;宋体& # 39;!重要;}
# dituContent跨度。BMap_Marker p{宽度:0 px !重要;高度:0 px !重要;}
& lt;/style>
这篇文章将为大家详细讲解有关html网页生成动态地图如何实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
关于html网页生成动态地图如何实现就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
