首页 > 代码库 > 百度map
百度map
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>我爱你</title> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.2&services=true"></script> <style type="text/css"> .div-relative { position: relative; color: #000; border: 1px solid #000; width: 99%; height: 800px; } /* 背景为黄色 */ .div-a { position: absolute; left: 80px; top: 80px; background: #00F; width: 300px; height: 300px; } /* DIV背景颜色为蓝色*/ </style></head><body> <div class="div-relative" id="dituContent" > </div></body></html><script> function initMap() { createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 //addMarker(markerArr); //向地图中添加marker //Load_Point(content); } //创建地图函数： var local; function createMap() { var map = new BMap.Map("dituContent", { minZoom: 13, maxZoom: 18 }); //在百度地图容器中创建一个地图 var point = new BMap.Point(111.292827, 30.697726); //定义一个中心点坐标 map.centerAndZoom(point, 13); //设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map; //将map变量存储在全局 local = new BMap.LocalSearch(map, { renderOptions: { map: map, selectFirstResult: false } }); } //地图事件设置函数： 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); map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })); } //创建marker function addMarker(markerArr1) { for (var i = 0; i < markerArr1.length; i++) { var json = markerArr1[i]; var p0 = json.monitoring_point_longitude; var p1 = json.monitoring_point_latitude; var point = new BMap.Point(p0, p1); var icon = { h: 60, l: 0, lb: 9, t: 1, w: 60, x: 6 }; var iconImg = createIcon(icon, 1, markerArr1[i]); var marker = new BMap.Marker(point, { icon: iconImg });; var iw = createInfoWindow(markerArr1, i); var label = new BMap.Label(json.monitoring_point_name, { "offset": new BMap.Size(icon.lb - icon.x + 15, -2) }); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor: "#808080", color: "#333", cursor: "pointer" }); (function () { var index = i; var _iw = iw; 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); } })() } } //<option value="http://www.mamicode.com/0">水文气象综合站</option> // <option value="http://www.mamicode.com/1">河道水文站</option> // <option value="http://www.mamicode.com/2">道路水位站</option> var mnType = { "0": "水文气象综合站", "1": "河道水文站", "2": "道路水位站" }; //创建InfoWindow function createInfoWindow(markerArr1, i) { var json = markerArr1[i]; var data = http://www.mamicode.com/loademstimedata(json.monitoring_point_mn);""; $(data).each(function (index, row) { tr += "<tr><td>" + row.factor_name + "</td><td>" + row.datatime + "</td><td>" + row.avgvalue + "</td></tr>"; }); var opts = { width: 700, // 信息窗口宽度 height: 400, // 信息窗口高度 title: "", // 信息窗口标题 enableMessage: true,//设置允许信息窗发送短息 message: ‘‘ } var detail = "站点名称：" + json.monitoring_point_name + "<br>站点类型：" + mnType[json.monitoring_point_type] + "<br/>站点的地址：" + json.monitoring_point_address; if (!json.monitoring_point_pic) { json.monitoring_point_pic = "../Images/img/none.jpg"; } var imgDom = "<img style=‘float:left;margin-left: 27px;width:156px;height:165px;‘ src=http://www.mamicode.com/‘" + json.monitoring_point_pic + "‘ /><div style=‘float:left;font-size: 17px;margin-left: 20px;width:370px;overflow-x: auto;‘>" + detail + "</div>"; var htmldom = imgDom + "<table class=‘table‘>" + "<thead><tr>" + "<th >名称</th>" + "<th >时间</th>" + "<th >监测值</th>" + "<tr/></thead>" + "<tbody>" + tr + "</tbody>" "</table>"; var iw = new BMap.InfoWindow(htmldom, opts); return iw; } //创建一个Icon function createIcon(json, t, obj) { var icon; if (obj.monitoring_point_pic) { if (t == 1) { icon = new BMap.Icon(obj.monitoring_point_pic, new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 20), offset: new BMap.Size(json.x, json.h) }); } } else { if (t == 1) { icon = new BMap.Icon("../Scripts/easyui/themes/ext/arrow_down.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 20), offset: new BMap.Size(json.x, json.h) }); } } return icon; } var points = null; initMap();</script>参考 http://developer.baidu.com/map/jsdemo.htm#a1_2
百度map
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。