使用JS在百度地图上绘制可编辑圆形并删除标注

45 浏览量更新于2024-08-30 收藏 177KB PDF 举报

本资源是一段JavaScript代码，用于在百度地图中实现画圆并删除标注的功能。首先，我们需要了解这段代码的工作原理： 1. **HTML结构**: - HTML文档结构包括一个`<html>`标签，`<head>`部分包含了元数据，如字符编码设置和视口缩放控制，以及CSS样式定义。其中，`<style>`标签设置了页面的全局样式，如字体和地图容器大小（`#allmap{width:100%;height:500px;}`）。 - `<body>`内有一个`<div>`元素，id为"allmap"，这是地图容器，其大小为100%的宽度和500像素的高度。 - 有一个`<p>`元素用于显示地图操作的描述。 2. **百度地图API引用**: - `<script>`标签引入了百度地图的JavaScript API，通过提供API版本号和密钥来获取地图服务。确保替换"您的密钥"为实际的API密钥。 3. **地图初始化**: - 使用`new BMap.Map("allmap")`创建了一个新的地图实例，并设置了初始中心点`mPoint`（经度116.404，纬度39.915），并设置缩放级别为15。 - `enableScrollWheelZoom()`允许用户通过滚轮滚动地图进行放大缩小。 - `var circle = new BMap.Circle(mPoint, 1000, {...})`创建了一个圆形覆盖物，半径为1000米，设置了填充颜色、线宽和透明度，并允许编辑。 4. **添加圆形覆盖物**: - `map.addOverlay(circle)`将圆形覆盖物添加到地图上，这样地图上会显示一个蓝色的圆形区域。 5. **删除标注的函数**: - `var removecircle = function(e, ee, marker)`定义了一个名为`removecircle`的函数，它接收三个参数：事件对象`e`、覆盖物实例`ee`和可能存在的标注`marker`。这个函数可能是为了在特定情况下删除圆形覆盖物或与之关联的标注，但此处的代码中并没有具体实现删除逻辑，因为没有引用到任何标注。 6. **功能概述**: 该代码的主要目的是在百度地图上展示一个圆形区域，并且理论上可以在这个区域内进行搜索和标注操作。然而，为了达到"返回北京市地图上圆形覆盖范围内的‘餐馆’检索结果，并展示在地图上"的效果，还需要在`removecircle`函数中加入搜索和标记功能，例如使用百度地图提供的地点搜索API（如`BMap.Geocoder`）来检索餐馆，然后用`addOverlay`方法添加标记。总结来说，这段代码是百度地图JavaScript应用的一个基础示例，展示了如何在地图上绘制可编辑的圆形区域。若要实现完整的搜索和标注功能，还需要结合更多的地图API调用和相关逻辑处理。

JS代码实现百度地图代码实现百度地图画圆画圆删除标注删除标注

把下面这段代码复制到百度地图的demo中运行，效果就是我想设计的效果。

<!DOCTYPE html>

<html>

<head>

body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

#allmap{width:100%;height:500px;}

p{margin-left:5px; font-size:14px;}

</style>

<title>圆形区域搜索</title>

</head>

<body>

<p>返回北京市地图上圆形覆盖范围内的“餐馆”检索结果，并展示在地图上</p>

</body>

</html>

// 百度地图API功能

var map = new BMap.Map("allmap"); // 创建Map实例

var mPoint = new BMap.Point(116.404, 39.915);

map.enableScrollWheelZoom();

map.centerAndZoom(mPoint,15);

var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3,enableEditing:true});

map.addOverlay(circle);

var removecircle = function(e,ee,marker){

//取得地图上所有的覆盖物

var overlays = map.getOverlays();

//取得圆形区域

var bounds = marker.getBounds();

var maker_arr = [];

for(var i=0;i<overlays.length;i++){

//判断覆盖物为标注的并且是在圆形区域内部的

if(overlays[i].uQ == "Marker"){

//获取标注点到圆心的距离与半径做对比

if(map.getDistance(marker.getCenter(),overlays[i].getPosition()) < marker.getRadius()){

maker_arr.push(overlays[i]);

}

var r=confirm("你确定要删除区域中"+(maker_arr.length-1)+"个标注吗？");

if (r==true){

for(var i=0;i<maker_arr.length;i++){

map.removeOverlay(maker_arr[i]);

}

map.removeOverlay(marker);

}else{

map.removeOverlay(marker);

}

//创建右键菜单

var circleMenu=new BMap.ContextMenu();

circleMenu.addItem(new BMap.MenuItem('删除',removecircle.bind(removecircle)));

circle.addContextMenu(circleMenu);

var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});

//local.searchNearby('餐馆',mPoint,1000);

function addMarker(point){

var marker = new BMap.Marker(point);

map.addOverlay(marker);

}

// 随机向地图添加25个标注

var bounds = map.getBounds();

var sw = bounds.getSouthWest();

var ne = bounds.getNorthEast();

var lngSpan = Math.abs(sw.lng - ne.lng);

var latSpan = Math.abs(ne.lat - sw.lat);

for (var i = 0; i < 5; i ++) {

var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));

addMarker(point);

}

</script>

功能：以某个区域批量删除maker。

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38557515

粉丝: 6
资源: 917

使用JS在百度地图上绘制可编辑圆形并删除标注

百度地图鼠标画圆工具类

JS自定义地图标注

百度地图api js在移动端画多边形的解决方法

C# VS2010下前后台交互调用百度地图API 实现标注、测距、画轨迹、画圆

百度地图鼠标画圆、画多边形DEMO

javascript画圆代码

flex 地图 画圆

SOSO地图API使用(一)在地图上画圆实现思路与代码

c++ 、MFC 实现中点画圆算法及工程代码、Bresenham画圆工程代码

VC++实现的中点画圆法源代码

最新资源

flex 地图画圆