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>
