<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uIGNq6dLthEQ5iM5G8mNfCl1BDDfWx9d"></script> <title>地图展示</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 13); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var markers = []; function Sector1(point2, radius, sDegree, eDegree, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) { var points = []; var step = ((eDegree - sDegree) / 4) || 4; points.push(point2); for ( var i = sDegree; i < eDegree + 0.01; i += step) { points.push(EOffsetBearing(point2, radius, i)); } points.push(point2); var polygon = new BMap.Polygon(//Polygon方法接受大量点后，可以合成任意图形 points , {strokeColor:strokeColour, strokeWeight:strokeWeight, strokeOpacity:Strokepacity, fillColor: fillColour, fillOpacity:fillOpacity}); return polygon; } function EOffsetBearing(point3, dist, bearing) { var latConv = map.getDistance(point3, new BMap.Point(point3.lng + 0.1, point3.lat)) * 5; var lngConv = map.getDistance(point3, new BMap.Point(point3.lng, point3.lat + 0.1)) * 3; var lat = dist * Math.cos(bearing * Math.PI / 180) / latConv; var lng = dist * Math.sin(bearing * Math.PI / 180) / lngConv; return new BMap.Point(point3.lng + lng, point3.lat + lat); } var points = new BMap.Point(116.404, 39.915); var polygon2 = Sector1(points, 4000, 0, 90, "#000000", 3, 0.5, "#00ff00", 0.5); map.addOverlay(polygon2); var polygon2 = Sector1(points, 4000, 90, 180, "#000000", 3, 0.5, "#00ff00", 0.5); map.addOverlay(polygon2); var polygon2 = Sector1(points, 4000, 180, 270, "#000000", 3, 0.5, "#00ff00", 0.5); map.addOverlay(polygon2); var polygon2 = Sector1(points, 4000, 270, 360, "#000000", 3, 0.5, "#00ff00", 0.5); map.addOverlay(polygon2); </script>