高德地图 JS API【入门】—— 动态添加、删除覆盖物

最新推荐文章于 2024-05-16 08:30:00 发布
最新推荐文章于 2024-05-16 08:30:00 发布
阅读量3.2k 收藏 7
点赞数 2
分类专栏： 大前端 # 高德地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onionlsh/article/details/86012815
版权

因工作需要，开始入门学习高德地图API。工作时间十分短，这个例子也只是在学习过程中慢慢摸索出来的。有哪里不对，希望高人出来指点。 

先直接上个demo：

demo

 

HTML部分：

<body>
	<div id="container" tabindex="0"></div>
	<div class="info" id="text">请用鼠标在地图上操作试试</div>
	<div class="input-card" style="width:26rem">
	    <h4>地图点击相关事件</h4>
	    <div>
      		<div class="input-item">
        		<button id="clickOn" class="btn" style="margin-right:1rem;">开启添加事件</button>
        		<button id="clickOff" class="btn" style="margin-right:1rem;">关闭添加事件</button>
        		<b
最低0.47元/天 解锁文章
foo_ooooool
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高德地图实现绘制覆盖物，自定义右键菜单
02-26
使用高德地图js-api实现绘制圆形、矩形、多边形；右键可删除可自定义菜单；
高德地图定位、周边搜索、位置弹框、添加覆盖物等功能
09-07
高德地图定位、周边搜索、位置弹框、添加覆盖物等功能，可以自定义定位，添加覆盖物，覆盖物点击事件等，自定义定位按钮
高德地图api--清除覆盖物（已解决）
舒小罗
08-26 7928
出现的问题如下： 左侧点击复选框后右侧会出现绿色相对应的道路，但是再次点击后对应的道路无法隐藏 为了解决这一个问题，可以使用高德地图api里面的“清除所有覆盖物” 文档：https://lbs.amap.com/api/javascript-api/example/common/overlay-clear. 根据文档，清除地图上所有添加的覆盖物需要用 map.clearMap(); 来看看代码： ...
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
05-01 1379
<div id="container"></div> var map = new AMap.Map('container'); var mouseTool = new AMap.MouseTool(map); var drawRectangle = mouseTool.rectangle(); var newArr = []; AMap.event.addListener(mouseTool, 'draw', function (e) { .
vue项目之高德地图获取在线的天气api（2024-05-16）
最新发布
hap1994的博客
05-16 1164
​ 高德地图：天气查询是一个简单的HTTP接口，根据用户输入的adcode（地区的编码），查询目标区域当前/未来的天气情况，数据来源是中国气象局。 使用API前您需先申请Key，若无高德地图API账号需要先申请账号。 ​
android 高德地图 删除多边形,高德地图多边形覆盖物添加、获取、删除
weixin_29793473的博客
05-26 1295
最近在做有关地图的项目 汇总一下 方便以后使用 上图是覆盖物绘制完成之后的编辑状态引入高德地图jsP.s.plugin后跟的是地图插件1、覆盖物绘制map.plugin(["AMap.MouseTool"], function() {var mouseTool = new AMap.MouseTool(map);drawTool.polygon({strokeColor: "#35fffd",s...
高德地图 Web JS API示例学习笔记（10）——覆盖物（地图控件、信息窗体）
hequhecong10857的博客
12-24 800
地图控件 地图控件的添加和移除 给地图添加比例尺、缩放工具条、鹰眼等控件 var scale = new AMap.Scale({ visible: false }), toolBar = new AMap.ToolBar({ visible: false }), overView = new AMap.OverView({ ...
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物...
weixin_34234823的博客
05-14 421
摘要：覆盖物，是一张地图的灵魂。有覆盖物的地图，才是完整的地图。在一张地图上，除了底层的底图（瓦片图，矢量图），控件（有功能可操作的工具），最重要最不可缺少的就是覆盖物了。覆盖物有多种，包括，标注、折线、多边形、信息窗口、聚合marker、麻点图和图片覆盖物。本文会详细介绍每一种覆盖物的概念，添加方法，修改方法，移除方法等。最后会提供示例和源代码下载。   示例demo：http://zhao...
高德地图清除上一次操作遗留的Polygon覆盖物
qq_19249021的博客
05-19 4341
首先先说我目前的场景。我目前项目中：一个地图划分了很多区块，每个区块都是Polygon覆盖物，用来制作鼠标滑动高亮效果。同时点击项目其他地方某处，也会在覆盖物上显示一个小方块，这个小方块我也是使用Polygon做的。 1. 项目痛点 我目前项目中：一个地图划分了很多区块，每个区块都是Polygon覆盖物，用来制作鼠标滑动高亮效果。同时点击项目其他地方某处，也会在覆盖物上显示一个小方块，这个小方块我也是使用Polygon做的。如下图： 高亮区域和白色方块区域都是覆盖物。 我重新添加白色方块覆盖物的时候会.
高德地图 API 实现 自定义创建多个可拉伸锚点矩形。
03-19
原生 JavaScript 仿 有赞商户后台，介入高德地图，实现地图自定义区域矩形划分并绑定 ui 层，几乎每行代码都有注释，方便修改理解。 适用多个项目领域，如：外卖送货、共享单车区域划分、配送商品等。 纯前端...
高德地图JavaScriptAPI部分功能
05-04
包含了高德地图JavaScriptAPI中的一些功能，主要是，定位，获取坐标，POI搜索，WGS与GCJ02坐标转换几个部分。仅供参考。
高德地图常用API.zip
07-15
高德地图API 所含资源有：点聚合，自定义图标修改，自定义修改弹窗，图形工具点，线，矩形绘制，车辆轨迹回放动画路线。
VUE使用高德地图marker点，通过添加其class类样式新增动效
weixin_43996368的博客
06-02 1754
在marker点下添加不断旋转的光圈
高德地图web端js
wasd986523的博客
05-05 868
下面是一些高德地图使用例子，自定义展示，右击拖动，搜索，画圆，定位等功能，没有整理仅供参考 var infoWindow = new AMap.InfoWindow({ isCustom:true,//使用自定窗口0909; content: "" + "" + "车架号：" + _tvin + "" +
web 高德地图输入提示并实现搜索，并修改点标记的窗体信息、实时路况、卫星图层、右键菜单
清叶 的专栏
04-20 2458
//输入提示,并实现搜索开始========= AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){ var autoOptions = { city: "", //城市，默认全国 input: "searchipt"//使用联想输入的input的id...
（五）高德地图之添加groundoverlay覆盖物
时代新人的博客
11-13 5509
本节主要实现的功能是往地图上添加一个groundoverlay覆盖物，用此方式可以实现公园电子导游，下面先来看一张效果图吧： 接下来我们还是直接上代码： 新建布局文件activity_groundoverlay.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://...
高德地图：创建多个覆盖区域
Ygaidi的博客
11-25 700
【代码】高德地图：创建多个覆盖区域。
高德地图的js api 覆盖物内发光效果
05-31
在高德地图的 JS API 中，可以通过利用 CSS3 的 `box-shadow` 属性来实现覆盖物内发光效果。下面是一个示例代码： ```javascript // 创建覆盖物 var marker = new AMap.Marker({ position: [...], map: map, icon: new AMap.Icon({ size: new AMap.Size(32, 32), image: '...jpg', imageSize: new AMap.Size(32, 32), // 设置 icon 的阴影效果 shadow: '0 0 10px #fff' }) }); ``` 上面的代码创建了一个标注覆盖物，并通过设置 `icon` 属性来添加了一个阴影效果。`shadow` 属性的值可以是一个字符串，也可以是一个数组。字符串的格式为 `X Y blur color`，其中 `X` 和 `Y` 分别表示阴影的水平和竖直偏移量，`blur` 表示阴影的模糊半径，`color` 表示阴影的颜色。如果需要设置多重阴影效果，可以使用数组来指定多个阴影效果，如 `['0 0 10px #fff', '0 0 20px #fff']`。 需要注意的是，由于在高德地图的 JS API 中，覆盖物的 DOM 元素是由 API 内部自动生成的，因此需要通过设置 `icon` 属性来添加阴影效果。如果需要对其他类型的覆盖物添加发光效果，可以通过设置覆盖物的 `content` 属性为一个包含阴影效果的 HTML 元素来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值