高德地图——添加标记的两种方法&删除地标记的两种方法
添加标记:
1、marker.setMap(map);
2、marker.add([marker]);
删除标记:
1.marker.setMap(null);
2 map.remove([marker1,marker2]);(前提是map用add添加的标记)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<title>添加标记-多点标记</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
#container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#searchNode{
position: absolute;
z-index: 9;
width: 300px;
height: 100px;
background: white;
text-align: center;
padding-top: 20px;
}
#setCenterNode{
position: absolute;
z-index: 9;
width: 300px;
background: white;
top: 100px;
}
.amap-icon img{
width: 25px;
height: 34px;
}
</style>
</head>
<body>
<div id="container"></div> <script>
var map = new AMap.Map('container',{
zoom:10,
center:[116.379391,39.861536]
}); var marker = new AMap.Marker({
icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //标记的图标
position:[116.379391,39.861536], //标记的坐标
offset:new AMap.Pixel(-50,-500) //像素的偏差值
});
marker.setMap(map); map.on('click',function(e){
//console.log(e.lnglat);
var marker = new AMap.Marker({
icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
position:[e.lnglat.lng,e.lnglat.lat],
offset:new AMap.Pixel(-10,-20)
});
//marker.setMap(map);
/* setTimeout(function(){
marker.setMap(null);
},5000); */ map.add([marker]);
setTimeout(function(){
map.remove([marker]);
},5000);
}) </script>
</body>
</html>
高德地图——添加标记的两种方法&删除地标记的两种方法的更多相关文章
- 高德地图添加marker及反地理编码获取POI
项目中集成百度.高德.腾讯地图已是司空见惯的事情,今天我总结了一下项目中用到的高德地图常用的功能: 1.展示高德地图并定位显示定位图标: 2.添加实时大头针: 3.反地理编码获取周围兴趣点 效果如下: ...
- 高德地图与CAD图叠加显示方法汇总及优缺点分析
前言 高德地图应用在许多领域,平常我们用的地图导航,除过正常的地图导航指引功能之外,其实还有很多实用的功能.如高德影像地图应用在包括地理.土地测量.水文学.生态学.气象学以及海洋学等方面.Auto ...
- Android 编程 AMapLocationClientOption 类中的 setNeedAddress 方法用处 (高德地图 com.amap.api.location.AMapLocationClientOption 中的类)
最近在用高德地图来写Android App, 其中有一些 方法是不太理解的,这里写一下 对 高德地图 com.amap.api.location.AMapLocationClientOption ...
- Android编程 高德地图 中如何重写 定位按键 的触发事件 (com.amap.api.maps2d.LocationSource)点击定位后不仅定位在地图中心点上而且可以设置地图的缩放大小和提示
在利用高德地图来编写自己的APP的时候,发现了一种对定位按键的重写方法,那就是利用 com.amap.api.maps2d.LocationSource 接口来重写. 什么是定位按键呢,下图中右 ...
- 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core
百度地图和高德地图坐标系的互相转换 GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...
- c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互,加载kml文件,dae文件。将二维高德地图覆盖到到三维谷歌地球表面。
网络上资源很多不全面,自己在开发的时候走了不少弯路,在这里整理了最全面的google全套开发,COM交互,web端交互.封装好了各种模块功能. 直接就可以调用. 第一种方式:调用COMAPI实现调用g ...
- 高德地图 API 计算两个城市之间的距离
1. 目前在项目中,遇到一个需求不会做,就是要计算两个城市之间的距离,而这两个城市的输入是可变的,如果要使用数据库来先存储两地之间的距离,调用的时候再来调用,那么存数据的时候,要哭的,因为光是省级区域 ...
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
- vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...
随机推荐
- PAT乙级:1087 有多少不同的值 (20分)
PAT乙级:1087 有多少不同的值 (20分) 当自然数 n 依次取 1.2.3.--.N 时,算式 ⌊n/2⌋+⌊n/3⌋+⌊n/5⌋ 有多少个不同的值?(注:⌊x⌋ 为取整函数,表示不超过 x ...
- 【游记】OI 2020-2021(在更)
[CSP-S2020初赛] [CSP-S2020] [NOIp 2020] [NOI冬令营 2021] [省选 2021] [NOI 2021]
- 记一次系统崩溃事件【Mac版】
事件:Mac系统崩溃,导致电脑数据丢失,以及数据安全备份措施的不到位的教训! 解决措施: 1.开机后按:Command+R 按开机键 ,进入Mac 实用工具, 选择磁盘工具.由于没有备份直接抹掉磁盘. ...
- idea 提示不能打开cmd.exe,idea 编译项目 CreateProcess error=740, 请求的操作需要提升 --->如何设置cmd以管理员身份运行
问题描述:idea 编译项目 idea 编译项目 CreateProcess error=740, 请求的操作需要提升 CreateProcess error=740, 请求的操作需要提升 全网搜索可 ...
- 基于arduino UNO R3+ESP8266控制LED灯的开关(无USB转TTL工具实现)
最近由于项目要求,需要开发物联网云平台,而本人对硬件和通信技术一窍不通,故而选择arduino这一简单单片机来实现学习掌握基础的硬件和通信技术. 下面就是本人通过查阅大佬资料做的一个整合版本的通过手机 ...
- ThinkPHP 5
use think\Controller 1.$this->request->param(); 内置request 安全对象, 不再使用 $_GET ,$_POST 2.path ...
- Oracle数据泵导入的时候创建索引是否会使用并行?
一.疑问,Oracle数据泵导入的时候创建索引是否会使用并行? 某客户需要使用数据泵进行迁移,客户咨询导入的时间能不能加快一点. 那么如何加快导入的速度呢? 多加一些并行,那么创建索引内部的索引并行度 ...
- 跟你说个笑话,硕士毕业两年,月薪10k,天天面向CV编程
"枯燥乏味的一天,又tm要开始了". 早上10:00,程序员毛毛带着路上买的早餐,打开24英寸的显示屏,去某论坛查一下昨天没有解决的bug. 9 个小时增删改查.搬砖写代码的一天又 ...
- Lock(锁)
Lock(锁) 从JDK 5.0开始,Java提供了更加强大的线程同步机制----通过显示定义同步锁对象来实现同步.同步锁使用Lock对象充当. java.util.concurrent.locks. ...
- 基于Gitea搭建属于自己的Git服务
作者:IT王小二 博客:https://itwxe.com 一.搭建环境和前提 搭建环境: 操作系统:CentOS7.6 Docker版本:docker-ce-18.09.9 Lsky Pro版本:1 ...