<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<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";
Font-family: "Microsoft Jas Black";
}
#allmap {
width:100%;
height:500px;
}
p {
margin-left:5px;
font-size:14px;
}
</style>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.3" ></script>
<title> Baidu Map Add overlays, drag overlays get current coordinates and regenerate overlays </title>
<body>
<div id= "Allmap" ></div>
<p> Add click Map to listen to events, click on the map to display the current latitude and longitude and new generation of overlays </p>
</body>
<script type= "Text/javascript" >
Baidu Map API Features
var map = new Bmap.map ("Allmap");
var point = new Bmap.point (116.646405, 36.939935);
Map.centerandzoom (Point, 15);
var polygon = new Bmap.polygon ([
New Bmap.point (116.636488, 36.945473),
New Bmap.point (116.637206, 36.934974),
New Bmap.point (116.653879, 36.93532),
New Bmap.point (116.653448, 36.945704)
], {strokecolor: "Blue", Strokeweight:2, strokeopacity:0.5}); Creating polygons
Map.addoverlay (Polygon); Add polygons
Map.addeventlistener ("click", Function (e) {
Alert (' Longitude: ' +e.point.lng+ ', Latitude: ' +e.point.lat ');
var now_point = new Bmap.point (E.POINT.LNG, E.point.lat);
SETP (E.point.lng,e.point.lat);
Marker.setposition (now_point);//Set cover position
});
var marker = new Bmap.marker (point); Create a Marker object
Marker.enabledragging (); Marker can be dragged and pulled
Drag End Event
Marker.addeventlistener ("Dragend", function (e) {
Get cover position
var o_point_now = marker.getposition ();
var lng = O_POINT_NOW.LNG;
var lat = O_point_now.lat;
E.POINT.LNG geographical longitude.
E.point.lat geographical latitude.
Alert (e.point.lng + "---," + E.point.lat);
Get_lng_lat ();
SETP (Lng,lat);
})
Map.addoverlay (marker); Add marker to the map
Get_lng_lat ();
Get latitude and longitude
function Get_lng_lat () {
Returns the geographic coordinates of the overlay callout.
var o_point_now = marker.getposition ();
var lng = O_POINT_NOW.LNG;
var lat = O_point_now.lat;
Alert (' Longitude: ' +lng+ ', Latitude: ' +lat ');
}
function Setp (Lng,lat) {
Console.info ("------" +parsefloat (LNG));
Console.info (parsefloat (LNG) +parsefloat ("0.01"));
var pointlist = new Array ();
Pointlist[0]=new Bmap.point (parsefloat (LNG)-parsefloat ("0.01"), parsefloat (LAT) +parsefloat ("0.01"));
Pointlist[1]=new Bmap.point (parsefloat (LNG)-parsefloat ("0.01"), parsefloat (LAT)-parsefloat ("0.005"));
Pointlist[2]=new Bmap.point (parsefloat (LNG) +parsefloat ("0.01"), parsefloat (LAT)-parsefloat ("0.005"));
Pointlist[3]=new Bmap.point (parsefloat (LNG) +parsefloat ("0.01"), parsefloat (LAT) +parsefloat ("0.01"));
Redraw a polygon
Polygon.setpath (pointlist);
}
</script>
Copy code can be used directly
Baidu Map Overlay Polygon Drag, click, create a new overlay
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
