高德地图的circle圈

高德地图上有很多类型的覆盖物，近期用到circle覆盖物，顺便记录下
官方文档：https://lbs.amap.com/api/javascript-api/reference/overlay

直接上案例

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>覆盖物-circle的添加与移除</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><script src="https://cache.amap.com/lbs/static/es5.min.js"></script><script src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><style>html,body,#container {width: 100%;height: 100%;}label {width: 55px;height: 26px;line-height: 26px;margin-bottom: 0;}button.btn {width: 80px;}</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:24rem;"><h4>添加、删除覆盖物</h4><div class="input-item"><label>Circle：</label><button class="btn" id="add-circle" style="margin-right:1rem;">添加Circle</button><button class="btn" id="remove-circle">删除Circle</button><button class="btn" id="reset-circle">重置Circle</button></div></div><script>
var map = new AMap.Map('container', {resizeEnable: true,zoom:11,center: [116.397428, 39.90923]
});
// 构造矢量圆形
var circle = new AMap.Circle({center: new AMap.LngLat('116.273707','39.896989'), // 圆心位置radius: 1000,  //半径strokeColor: "#76D5C2",  //线颜色strokeOpacity: 1,  //线透明度strokeWeight: 1,  //线粗细度fillColor: "#76D5C2",  //填充颜色fillOpacity: 0.35 //填充透明度
});//事件绑定
document.querySelector("#add-circle").onclick = function() {map.add(circle);map.setFitView();
}
document.querySelector("#remove-circle").onclick = function() {map.remove(circle);map.setFitView();
}
document.querySelector("#reset-circle").onclick = function() {/* map.remove(circle);circle = new AMap.Circle({center: new AMap.LngLat('116.405285', '39.904989'), // 圆心位置radius: 500,  //半径strokeColor: "#76D5C2",  //线颜色strokeOpacity: 1,  //线透明度strokeWeight: 1,  //线粗细度fillColor: "#76D5C2",  //填充颜色fillOpacity: 0.35 //填充透明度});map.add(circle); */console.log(circle.getCenter())circle.setCenter(['116.405285','39.904989']);circle.setRadius(500);circle.setOptions({'strokeWeight':6,'fillColor': "#D90000",  //填充颜色})map.setFitView();
}</script>
</body>
</html>

难点

重置圆的方法(官方文档上的传参方式不明确)：
可以删除重新添加，但是会有很多问题
现在利用其方法，改变圆

影响圆的因素及改变圆的方法

圆心 - circle.setCenter(['116.405285','39.904989']);
半径 - circle.setRadius(500)
圆的样式 - circle.setOptions({ 'strokeWeight':6, 'fillColor': "#D90000", //填充颜色 })

高德地图的circle圈相关推荐

高德地图怎么画圈_高德地图 Javascript API 入门（二）
高德地图 Javascript API 入门(二) 鼠标工具插件测量距离 JS map.plugin(["AMap.MouseTool"],function () { var m ...
高德地图怎么画圈_点标记-覆盖物-教程-地图 JS API | 高德地图API
点标记是用来标示某个位置点信息的一种地图要素,本章介绍如何在地图图面使用点标记,分别包括:点标记 Marker 灵活点标记 ElasticMarker 圆形标记 CircleMarker 文本标记 T ...
Android 高德地图计算 Circle 计算上下左右四个点经纬度，Circle和Polygon是否全部包含，计算地图中点到线的最短距离
/*** 假设地球为一半径为R的表面光滑圆球体,* 表面上同一经线圈上相差1"两点间的距离为 2πR/360/3600* 表面上同一纬线圈上相差1"两点间的距离为 2πR×cos( ...
高德地图WEB端，在所画的圆（Circle）内显示在圆（Marker）内的点
1.圆和点都是自己定义的,如图: 2.在高德地图的示例中心测试通过,代码如下: <!doctype html> <html> <head><meta char ...
android 地铁地图api,利用高德地图api绘制公交+地铁的等时圈
等时圈是指从某点出发,以某种交通方式在特定时间内能到达的距离覆盖的范围,在可达性分析中十分常见.原本我们需要将地图栅格化不停地调用路径规划api来获得等时圈,现在已经有网站为我们做好了这些工作,比如h ...
测试:使用高德地图把经纬度转为商圈
第一次使用高德地图,经纬对转换为商圈,测试如下 def parseGaodeJson(jsonStr: String) = { val areaList: List[JsonAST.JValue] = ...
利用高德地图关键字检索POI-实现仿微信发朋友圈搜索附近位置
转载请注明出处:http://blog.csdn.net/Alpha58/article/details/57079874 前言由于项目中需要实现搜索附近位置作为收获地址,所以采用了高德地图的关键字 ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
Android开发丶基于高德地图实现定位、搜索定位、绘制圆圈自定义图标及改变圆圈半径等功能
前一段时间接了个需求,进入一个地图界面,可以获取当前位置信息,通过输入位置信息获取位置,绘制圆圈并可以实时改变圆圈半径等功能,地图SDK我们使用的是高德地图,仔细阅读了开发文档,发现这些需求都可以通过 ...

高德地图的circle圈

直接上案例

难点

高德地图的circle圈相关推荐

最新文章

热门文章