Abstract: The last chapter teaches you how to establish your own administrative area map. This time to provide you with a visual selection of areas, and can automatically generate latitude and longitude of the Code tool. The source code for the tool is completely public and has a detailed comment. Can be simply as a tool, but also as the Baidu Map API learning case.
Tool Description:
1, switch can be controlled, whether on the map to establish a line covering
2, double click the map, will establish the polygon covering
3, automatically enter the latitude and longitude of information, the last line do not copy. Because the map Dblclcik event, will first trigger two times click, the last is DblClick.
4, clear the button to clear the cover, clear latitude and longitude data, to start again
All source code:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Administrative Area Tools </title>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.2" ></script>
<body>
<div style= "width:520px;height:340px;border:1px solid Gray" id= "container" ></div>
<p><input id= "startbtn" type= button "onclick=" Starttool (); "value=" Open fetch point tool/><input type= "button" onclick= "Map.clearoverlays" ();d Ocument.getelementbyid (' info '). InnerHTML = ';p oints=[]; value= Clear/></p>
<div id= "Info" ></div>
</body>
<script type= "Text/javascript" >
var map = new Bmap.map ("container"); Create a Map instance
Map.centerandzoom ("Beijing", 11); Initialize map, set center point coordinates and map level
var key = 1; Switch
var Newpoint; A latitude and longitude degree
var points = []; Array, latitude and longitude of information
var polyline = new Bmap.polyline (); Line Coverings
function Starttool () {//switch functions
if (key==1) {
document.getElementById ("Startbtn"). Style.background = "green";
document.getElementById ("Startbtn"). Style.color = "white";
document.getElementById ("Startbtn"). Value = "open state";
key=0;
}
else{
document.getElementById ("Startbtn"). Style.background = "Red";
document.getElementById ("Startbtn"). Value = "Off state";
Key=1;
}
}
Map.addeventlistener ("click", Function (e) {//click map to form a polyline overlay
Newpoint = new Bmap.point (E.point.lng,e.point.lat);
if (key==0) {
if (POINTS[POINTS.LENGTH].LNG==POINTS[POINTS.LENGTH-1].LNG) {alert (111);}
Points.push (Newpoint); Put the new point in the array
Polyline.setpath (points); Set an array of points for a polyline
Map.addoverlay (polyline); Add a polyline to a map
document.getElementById ("Info"). InnerHTML + =
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
