首页百度地图做一个格子方块区域代码

百度地图做一个格子方块区域代码

时间: 2024-03-08 19:47:22 浏览: 148

以下是一个简单的示例代码，用于在百度地图上创建一个格子方块区域： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度地图创建格子方块区域示例</title> <style type="text/css"> #map { height: 500px; width: 800px; } </style> </head> <body> <div id="map"></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("map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 创建一个矩形 var rectangle = new BMap.Rectangle(new BMap.Bounds(new BMap.Point(116.331335,39.897038), new BMap.Point(116.357843,39.912798)), {strokeWeight: 2, strokeColor: "#ff0000", fillColor: "#ffffff", fillOpacity: 0.5}); // 添加矩形到地图 map.addOverlay(rectangle); // 将矩形划分成多个子块 var bounds = rectangle.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = ne.lng - sw.lng; var latSpan = ne.lat - sw.lat; var rows = 3; // 行数 var cols = 3; // 列数 var stepX = lngSpan / cols; var stepY = latSpan / rows; var markers = []; // 存放子块的数组 for (var i = 0; i < rows; i++) { for (var j = 0; j < cols; j++) { var marker = new BMap.Marker(new BMap.Point(sw.lng + j * stepX, sw.lat + i * stepY)); markers.push(marker); map.addOverlay(marker); } } </script> </body> </html> ``` 在这个示例中，我们首先创建了一个矩形，然后将它划分成 3 行 3 列的子块，并将子块添加到地图上。您可以根据需要调整行数、列数和子块大小。请注意，您需要将“您的密钥”替换为您在百度地图开发者平台上申请的密钥。

阅读全文