帮我生成个使用百度地图js api的demo,demo需要显示地图,地图中心点为西安市,demo中可以手动划区域,生成对应的polygon,生成的polygon的坐标点保存在一个名为polygon_list的数组中,这个数组可以供后面使用
时间: 2023-05-27 19:04:53 浏览: 170
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用百度地图JS API示例</title>
<style type="text/css">
#container {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(108.940175, 34.341568); // 创建中心点
map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 启用滚轮缩放
var polygon_list = []; // 创建用于保存坐标点的数组
var polygonOptions = {
strokeColor: "#FF0000", //边线颜色。
fillColor: "#FFFAFA", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, //边线的宽度,以像素为单位。
strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。
fillOpacity: 0.5, //填充的透明度,取值范围0 - 1。
strokeStyle: 'solid' //边线的样式,solid或dashed。
};
var polygon = null; // 定义用于保存当前绘制的多边形
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, // 是否开启绘制模式
drawingType: BMAP_DRAWING_POLYGON, // 绘制模式,多边形
enableDrawingTool: true, // 是否显示绘制工具栏
polygonOptions: polygonOptions // 多边形样式设置
});
drawingManager.addEventListener('overlaycomplete', function(e){
if (e.drawingMode == BMAP_DRAWING_POLYGON) {
polygon = e.overlay;
var path = polygon.getPath();
var pathStr = '';
for (var i = 0; i < path.length; i++) {
pathStr += '[' + path[i].lng + ',' + path[i].lat + '],';
}
polygon_list.push(pathStr.substring(0,pathStr.length-1));
}
});
</script>
</body>
</html>
注:以上代码中的密钥为测试密钥,实际使用时需替换成自己申请的百度地图API密钥。
阅读全文