<! DOCTYPE html>
<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{width:100%;height:100%;margin:0;font-family: "Microsoft Jas Black";}
#allmap {width:100%; height:500px; overflow:hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
List-style:none;
}
p{font-size:12px;}
bt=
font-size:14px;
Font-family: "Microsoft Jas Black";
Font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= Your Keys" ></script>
<!--loading the mouse drawing tool--
<script type= "Text/javascript" src= "Http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_ Min.js "></script>
<link rel= "stylesheet" href= "Http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/ >
<!--loading the Retrieve Information window--
<script type= "Text/javascript" src= "http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/ Searchinfowindow_min.js "></script>
<link rel= "stylesheet" href= "Http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css"/>
<title> Mouse Drawing Tools </title>
<body>
<div id= "Allmap" style= "overflow:hidden;zoom:1;position:relative;" >
<div id= "Map" style= "Height:100%;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;" ></div>
</div>
<div id= "Result" >
<input type= "button" value= "get the number of overlays drawn" onclick= "alert (Overlays[0].getpath () [0].lng]"/>
<input type= "button" value= "Clear all Overlays" onclick= "clearAll ()"/>
</div>
<script type= "Text/javascript" >
Baidu Map API Features
var map = new Bmap.map (' map ');
var poi = new Bmap.point (116.307852,40.057031);
Map.centerandzoom (POI, 16);
Map.enablescrollwheelzoom ();
var overlays = [];
var overlaycomplete = function (e) {
Overlays.push (E.overlay);
};
var styleoptions = {
Strokecolor: "Red",//Edge color.
FillColor: "Red",//Fill color. When the argument is empty, the circle has no fill effect.
The width of the strokeweight:3,//edge, in pixels.
strokeopacity:0.8,//edge transparency, value range 0-1.
fillopacity:0.6,//Fill transparency, value range 0-1.
Strokestyle: ' Solid '//edge style, solid or dashed.
}
Instantiate the mouse drawing tool
var drawingmanager = new Bmaplib.drawingmanager (map, {
Isopen:false,//whether to turn on draw mode
Enabledrawingtool:true,//whether the toolbar is displayed
Drawingtooloptions: {
Anchor:bmap_anchor_top_right,//Location
Offset:new bmap.size (5, 5),//deviation value
},
Circleoptions:styleoptions,//round style
Polylineoptions:styleoptions,//Line style
Polygonoptions:styleoptions,//Polygon style
Rectangleoptions:styleoptions//Rectangle style
});
Add mouse Draw tool to listen for events to get drawing results
Drawingmanager.addeventlistener (' Overlaycomplete ', overlaycomplete);
function ClearAll () {
for (var i = 0; i < overlays.length; i++) {
Map.removeoverlay (Overlays[i]);
}
Overlays.length = 0
}
</script>
</body>
Baidu Map Get Rectangle point
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
