高德地图——添加标记的两种方法&删除地标记的两种方法
添加标记:
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乙级:1015 德才论 (25分)
			
1015 德才论 (25分) 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人 ...
 - Linux if[......] then ......else...... fi
			
条件表达式 if [ -f file ] 如果文件存在if [ -d ... ] 如果目录存在if [ -s file ] 如果文件存在且非空 if [ -r file ] ...
 - 【小工具系列】Python + OpenCV 图片序列转换成视频
			
图片序列转换成视频 最近一直在找一个工具,能够将一堆图片转化成视频.网上找了一些小软件,还有 win10 的照片自带的视频制作功能,都不是很满意. 又不想下载那些专业的视频剪辑软件大材小用. 然后找到 ...
 - QT: 如何移动和缩放一个无边框窗口
			
一个QT窗口如下可以做到无边框: Window { id: window //Designer 竟然不支持..., 设计模式时要注意 flags: Qt.FramelessWindowHint wid ...
 - 背单词(AC自动机+线段树+dp+dfs序)
			
G. 背单词 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 给定一张包含N个单词的表,每个单词有个价值W.要求从中选出一个子序列使 ...
 - 自学linux——7.Linux的自有服务(进阶篇)
			
linux自有服务 1.设置主机名 (1)临时设置主机名,需要切换用户(su)使之生效 #hostname主机名 (2)永久设置主机名,需要重启 先找到一个文件[主机名的配置文件]/etc/sysco ...
 - vue菜单切换
			
HTML: <div id="box"> <ul> <li v-for= "(item,index) in arry"> & ...
 - 使用VNC远程安装CentOS 7操作系统
			
使用VNC远程安装CentOS 7操作系统 by 无若 数据中心一般都不在本地,如果希望重新安装系统,难道还要跑到数据中心...所以必须要有一种方式来远程解决这个问题. 目前CentOS 7主要使用的 ...
 - Docker入门第三章
			
配置阿里云镜像加速器 1.首先打开阿里云,搜索容器镜像服务,打开如下 2.配置镜像加速器 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.j ...
 - Manage Historical Snapshots in Sonarqube
			
Login as admin, go to a dashboard of a project, then click "Configuration -> History" a ...