高德地图——添加标记的两种方法&删除地标记的两种方法
添加标记:
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 ...
随机推荐
- VM安装kali操作系统
工具:VMware Workstation 15 Pro(15.5.6 build-16341506),kali-linux-2020.2-installer-amd64.iso vm15下载链接:h ...
- python 处理protobuf 接口常见错误
python 处理protobuf 接口常见错误 1.问题 : Assignment not allowed to repeated field '> http://www.coin163.co ...
- SSRF漏洞入门篇
SSRF漏洞,又名服务端请求伪造漏洞. PHP中下列函数使用不当会导致SSRF: file_get_contents().fsockopen().curl_exec()函数(源码审计的时候注意点儿): ...
- WCF简单Demo
WCF,光看书的原理,稍微有点枯燥,通过自己动手,会更容易理解契约声明,面向服务,分布式等概念. 1.创建WCF服务. 2.WcfService1.CS中声明新的契约. namespace WcfSe ...
- MySql查询上周(周一到周日)每天的日期!土方!
首先介绍一个函数:YEARWEEK(date[,mode]) 主要说明一下后面的可选参数mode,这个参数就是指定一周里面哪一天是第一天. 默认一周是从周日开始,这显然不太符合我们的要求.要指定每周从 ...
- 终拿字节Offer...动态规划复盘...
大家好!我是 Johngo 呀! 和大家一起刷题不快不慢,没想到已经进行到了第二阶段,「动态规划」这部分题目很难,而且很不容易理解,目前我的题目做了一半,凭着之前对于「动态规划」的理解和最近做的题目做 ...
- 学习笔记:数学-GCD与LCM-素数筛法
筛法 埃筛 埃拉托斯特尼筛法的缩写,EraSieve (这个英文其实是为了方便做函数名不要再写shake了) 它的核心思想其实是当确认了一个数是质数以后,把它的所有倍数打上标记说这玩意不是质数.那现在 ...
- OpenGL学习笔记(五)变换
目录 变换 向量 向量的运算 向量与标量运算 向量取反 向量加减 求向量长度 向量的单位化 向量相乘 点乘(Dot Product) 叉乘 矩阵 矩阵的加减 矩阵的数乘 矩阵相乘 矩阵与向量相乘 与单 ...
- Oracle中使用虚拟表DUAL或XMLTABLE返回顺序数列
在Oracle中使用虚拟表DUAL或XMLTABLE返回顺序数列 使用DUAL表和CONNECT BY LEVEL的特殊用法,返回一个1-10的顺序数列,示例代码如下: SELECT LEVEL FR ...
- Centos配置网络和主机映射
目录 虚拟机网络的三种配置方式 配置虚拟机IP 主机映射问题 配置虚拟机的主机名 虚拟机远程登录 虚拟机网络的三种配置方式 桥接模式:当前虚拟机与主机在同一个局域网下,同一个局域网下的所有电脑都可以访 ...