本篇文章给大家带来的内容是关于html网页生成动态地图的代码实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
代码如下：
<script type="text/javascript"> //创建和初始化地图函数： function initmap() { createmap(); //创建地图 setmapevent(); //设置地图事件 addmapcontrol(); //向地图添加控件 addmarker(); //向地图中添加marker } //创建地图函数： function createmap() { var map = new bmap.map("ditucontent"); //在百度地图容器中创建一个地图 var point = new bmap.point(106.54904, 29.60076); //定义一个中心点坐标 map.centerandzoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map; //将map变量存储在全局 } //地图事件设置函数： function setmapevent() { map.enabledragging(); //启用地图拖拽事件，默认启用(可不写) map.enablescrollwheelzoom(); //启用地图滚轮放大缩小 map.enabledoubleclickzoom(); //启用鼠标双击放大，默认启用(可不写) map.enablekeyboard(); //启用键盘上下左右键移动地图 } //地图控件添加函数： function addmapcontrol() { //向地图中添加缩放控件 var ctrl_nav = new bmap.navigationcontrol({ anchor: bmap_anchor_top_left, type: bmap_navigation_control_large }); map.addcontrol(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new bmap.overviewmapcontrol({ anchor: bmap_anchor_bottom_right, isopen: 1 }); map.addcontrol(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new bmap.scalecontrol({ anchor: bmap_anchor_bottom_left }); map.addcontrol(ctrl_sca); } //标注点数组 var markerarr = [{ title: "公司名称", content: "公司地址", point: "106.549449|29.600407", isopen: 0, icon: { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5} } ]; //创建marker function addmarker() { for (var i = 0; i < markerarr.length; i++) { var json = markerarr[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new bmap.point(p0, p1); var iconimg = createicon(json.icon); var marker = new bmap.marker(point, { icon: iconimg }); var iw = createinfowindow(i); var label = new bmap.label(json.title, { "offset": new bmap.size(json.icon.lb - json.icon.x + 10, -20) }); marker.setlabel(label); map.addoverlay(marker); label.setstyle({ bordercolor: "#808080", color: "#333", cursor: "pointer" }); (function () { var index = i; var _iw = createinfowindow(i); var _marker = marker; _marker.addeventlistener("click", function () { this.openinfowindow(_iw); }); _iw.addeventlistener("open", function () { _marker.getlabel().hide(); }) _iw.addeventlistener("close", function () { _marker.getlabel().show(); }) label.addeventlistener("click", function () { _marker.openinfowindow(_iw); }) if (!!json.isopen) { label.hide(); _marker.openinfowindow(_iw); } })() } } //创建infowindow function createinfowindow(i) { var json = markerarr[i]; var iw = new bmap.infowindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><p class='iw_poi_content'>" + json.content + "</p>"); return iw; } //创建一个icon function createicon(json) { var icon = new bmap.icon("http://app.baidu.com/map/images/us_mk_icon.png", new bmap.size(json.w, json.h), { imageoffset: new bmap.size(-json.l, -json.t), infowindowoffset: new bmap.size(json.lb + 5, 1), offset: new bmap.size(json.x, json.h) }) return icon; } initmap(); //创建和初始化地图</script> <!--引用百度地图api--><style type="text/css"> .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} #ditucontent p span.bmap_marker.bmap_noprint{background: url('/images/marker_red.png') !important;height:26px !important;} #ditucontent .bmaplabel{background-color:white; border:0px !important;left:15px !important;font-size:14px !important;font-weight:bold !important;color:red !important;font-family:'宋体' !important;} #ditucontent span.bmap_marker p{width:0px !important;height:0px !important;}</style>
相关推荐：
动态网页地址如何变成静态
生成的静态页 怎么把里面php地址改成html地址
以上就是html网页生成动态地图的代码实现的详细内容。