<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{ width: 800px; height: 600px; } </style> <!-- 01 导入js --> <script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script> </head> <body> <!-- Prepare container --> // Prepare a center point (longitude, latitude) var map = new BMapGL.Map("container") // Initialize map <script> <div id="container"></div>
var point = new BMapGL.Point(113.665,34.784);
// Set the center point and zoom level
map.centerAndZoom(point, 15);
// Mouse wheel zoom
map.enableScrollWheelZoom(true);
// Add a point
var marker = new BMapGL.Marker(point);
// Add overlay
map.addOverlay(marker);
// Store multiple points
var line = [];
// Store markers
var markers = [];
// Listen for events
map.addEventListener( "click",e=>{ // Create point var p = new BMapGL.Point(e.latlng.lng,e.latlng.lat); // Create mark
var m = new BMapGL.Marker(p);
markers.push(m);
// Add markers
map.addOverlay(m);
// Store points
line.push(p);
})
map.addEventListener("dblclick", e=>{ // Put the 0th point to the end line.push(line[0]); // Create the polygon first // var polygone = new BMapGL.Polygon(line,{fillColor:"red", strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}) // map.addOverlay(polygone); // Add line
var polyline = new BMapGL.Polyline(line,{strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(polyline); // Clear the list of points
line
=
[] ;
// Stroke line, Color, Weight, OPacity transparency
// Clear point
markers.forEach(item=>map.removeOverlay(item));
// Clear point
markers = [];
})
// 圆形区域
var circle = new BMapGL.Circle(point,1000,{strokeColor:"green"});
map.addOverlay(circle);
</script>
</body>
</html>
