1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />--> 7 <!--<script type="text/javascript" src="content/js/apiv2.0.min.js"></script> <!--离线百度地图apiv2.0-->--> 8 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密匙"></script> 9 <style type="text/css"> 10 body, html, #allmap { 11 width: 100%; 12 height: 100%; 13 margin: 0; 14 font-family: "微软雅黑"; 15 } 16 17 #l-map { 18 height: 100%; 19 width: 100%; 20 } 21 22 #r-result { 23 width: 100%; 24 } 25 </style> 26 <title></title> 27 </head> 28 <body> 29 <div id="l-map"></div> 30 </body> 31 </html> 32 33 34 <script type="text/javascript"> 35 //百度地图API功能 36 var map = new BMap.Map("l-map", { mapType: BMAP_NORMAL_MAP }); //设置卫星图为底图 37 var point = new BMap.Point(114.125973657, 22.5460535462); // 创建点坐标 38 map.centerAndZoom(point, 10); // 初始化地图,设置中心点坐标和地图级别。 39 map.enableScrollWheelZoom(true); //启动滚轮放大缩小 40 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 41 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 42 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 43 44 45 // 指定标注的图片 粉红色 46 var myIcon = new BMap.Icon("content/shipMarker0.png", new BMap.Size(50, 17)); 47 // 创建标注的坐标点 这些为粉红色船坐标 48 var poinArr = [ 49 new BMap.Point(114.225973657, 22.5460535462), 50 new BMap.Point(114.029973657, 22.5560535462), 51 new BMap.Point(114.025973657, 22.3760535462), 52 new BMap.Point(114.125973657, 22.5660535462), 53 new BMap.Point(114.41248, 22.997893), 54 new BMap.Point(114.62248, 22.927893), 55 new BMap.Point(114.43248, 22.927893) 56 ]; 57 for (var i = 0; i < poinArr.length; i++) { 58 //创建标记 59 var marker = new BMap.Marker(poinArr[i], { icon: myIcon }); 60 //添加标记 61 map.addOverlay(marker); 62 showInformation(marker, map); 63 } 64 65 66 // 指定标注的图片 红色 67 var myIcon1 = new BMap.Icon("content/shipRed0.png", new BMap.Size(28, 10)); 68 // 创建标注的坐标点 这些为红色船坐标 69 var poinArrRed = [ 70 new BMap.Point(114.725973657, 22.6460535462), 71 new BMap.Point(114.319973657, 22.7460535462), 72 new BMap.Point(114.425973657, 22.4460535462), 73 new BMap.Point(114.425973657, 22.5460535462), 74 new BMap.Point(114.51248, 22.757893), 75 new BMap.Point(114.62248, 22.857893) 76 ]; 77 for (var i = 0; i < poinArrRed.length; i++) { 78 //创建标记 79 var marker1 = new BMap.Marker(poinArrRed[i], { icon: myIcon1 }); 80 //添加标记 81 map.addOverlay(marker1); 82 showInformation(marker1, map); 83 } 84 85 86 // 指定标注的图片 黄色 87 var myIcon2 = new BMap.Icon("content/shipYellow0.png", new BMap.Size(50, 50)); 88 // 创建标注的坐标点 这些为黄色船坐标 89 var poinArrYellow = [ 90 new BMap.Point(113.725973657, 22.6460535462), 91 new BMap.Point(114.219973657, 22.6460535462), 92 new BMap.Point(114.125973657, 22.4460535462), 93 new BMap.Point(114.225973657, 22.2460535462), 94 new BMap.Point(113.51248, 22.157893), 95 new BMap.Point(114.02248, 22.357893) 96 ]; 97 for (var i = 0; i < poinArrRed.length; i++) { 98 //创建标记 99 var marker2 = new BMap.Marker(poinArrYellow[i], { icon: myIcon2 }); 100 //添加标记 101 map.addOverlay(marker2); 102 showInformation(marker2, map); 103 } 104 105 106 //点击marker标志，弹出当前小船的信息 107 function showInformation(marker, map) { 108 var information = new BMap.InfoWindow("编号：ZH980</br>类型：商务船<br />出发时间：<time>08:00am</time><br />到达时间：<time>13:00</time>"); 109 marker.addEventListener("click", function () { 110 this.openInfoWindow(information); 111 }); 112 } 113 114 115 //创建多边形 116 var polygon = new BMap.Polygon([ 117 new BMap.Point(114.025973657, 22.7460535462), 118 new BMap.Point(114.003973657, 22.5460535462), 119 new BMap.Point(114.025973657, 22.3460535462), 120 new BMap.Point(114.325973657, 22.5460535462), 121 new BMap.Point(114.41248, 22.927893) 122 ], { 123 strokeColor: "rgb(255,0,0)",//边线颜色 124 strokeWeight: 2, //边线的宽度 125 strokeOpacity: 0.8, //边线的透明度 126 fillOpacity: 0.2, //填充的透明度 127 strokeStyle: "dashed" //设置边线样式 128 }); 129 //开启编辑功能 130 //polygon.enableEditing(); 131 //将此覆盖添加到地图上 132 map.addOverlay(polygon); 133 134 135 136 //centre:椭圆中心点,X:横向经度,Y:纵向纬度 137 //function add_oval(centre, x, y) { 138 // var assemble = new Array(); 139 // var angle; 140 // var dot; 141 // var tangent = x / y; 142 // for (i = 0; i < 36; i++) { 143 // angle = (2 * Math.PI / 36) * i; 144 // dot = new BMap.Point(centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y); 145 // assemble.push(dot); 146 // } 147 // return assemble; 148 //} 149 //var oval = new BMap.Polygon(add_oval(new BMap.Point(114.41248, 22.727893), 0.3, 0.3), { strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.2 }); 150 //map.addOverlay(oval); 151 </script>
