百度地图的电子围栏

  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>
posted @ 2017-08-29 10:32 LuckyDog020 阅读(1707) 评论(0) 收藏举报
LuckyDog020

百度地图的电子围栏

公告
