javascript高德地图实现点击marker消失marker
javascript高德地图实现点击marker消失marker
<pre>
var markers = [];
var positions = [[120.17718, 30.21772], [120.17718, 30.21872]];
for (var i = 0, marker; i < positions.length; i++) {
marker = new AMap.Marker({
map: map,
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: positions[i],
content: '<div class="marker-route marker-marker-bus-from zhongzimark" zhongziid=1><img class="markerimg" src="http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" /><div class="markarea"></div></div>' //自定义点标记覆盖物内容
});
markers.push(marker);
markers.push(marker);
}
$.each(markers, function (k, v) {
markers[k].on('click', function () {
//获取html属性方法
var htmlc=markers[k].getContent();
htmlc=$(htmlc);
console.log($(htmlc).attr('zhongziid'))
if ( markers[k]) {
markers[k].setMap(null);
markers[k] = null;
}
/* var str2 = {"personid": <?php echo $personid ?>, "type": 1, "shuzhi": 10, "tag": 3};
str2 = JSON.stringify(str2);
ws.send(str2);*/
});
})
<style>
.zhongzimark {
position: relative;
width: 60px;
height: auto;
overflow: hidden;
}
.markerimg{
width:15%;
}
.markarea{
width:15%;
height:auto;
overflow:hidden;
line-height: 1.3;
text-align: center;
color: #000;
background: #FFF;
}
</style>
</pre>
ps:原理就是 先循环遍历marker 显示并且添加到markers数组 然后循环遍历markers数组添加事件就好了 getContent可以获取到html 然后用jquery attr方法获取属性
javascript高德地图实现点击marker消失marker的更多相关文章
- javascript高德地图放到网页中的方法
javascript高德地图放到网页中的方法 1 先获取到经纬度http://lbs.amap.com/console/show/picker 2 下面代码直接设置下中心点 和标记点就可以了 < ...
- android studio高德地图的显示于定位(附带逆地理编码围栏)
首先注册高德成为开发者(打开高德地图,点击底部的开发者平台),创建应用,按照要求填写相应信息 网站:http://lbs.amap.com/api/android-sdk/guide/create-p ...
- Android Studio之高德地图实现定位和3D地图显示
在应用开发中,地图开发是经常需要使用的“组件”,国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德地图实现定位和3D地图显示,并标注相应位置,话不多说,先看看效果,在上代码. 效果如图: 首先 ...
- android高德地图网络路径实现自定义marker并点击弹出自定义窗口
android中使用地图的地方随处可见,今天记录一下网络路径生成自定义marker,点击标记弹出自定义的窗口(在这里使用的是高德地图) 在这里我们使用Grilde去加载网络图片,因为这个简直太方便了! ...
- 【高德地图API】从头德国高中生JS API(三)覆盖物——大喊|折线|多边形|信息表|聚合marker|点蚀图|照片覆盖
覆盖物,是一张地图的灵魂.有覆盖物的地图.才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具).最重要最必不可少的就是覆盖物了.覆盖物有多种.包含.标注.折线.多 ...
- 【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
- JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索
代码如下 (填入Key值) : <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- web开发如何使用高德地图API(四)通过AMap.Marker自定义标点
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- 高德地图(AMap)JavaScript API的使用
申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: <script type="text/j ...
随机推荐
- python 中的tile函数,shape函数,sum函数
1.tile函数: tile函数是模板numpy.lib.shape_base中的函数.函数的形式是tile(A,reps) A的类型几乎所有类型都可以:array, list, tuple, dic ...
- 【深入ASP.NET原理系列】--Asp.Net Mvc和Asp.Net WebForm实际上共用一套ASP.NET请求管道
.NET FrameWork4在系统全局配置文件(如在如下目录中C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config) 中添加了一个名字叫Url ...
- Yarn (转自之乎者也)
作者:青俞链接:https://www.zhihu.com/question/34016617/answer/57822812来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- vue之组件通信
vue组件通信一般分为以下几种情况: 1.父子组件通信: 2.兄弟组件通信: 3.跨多层级组件通信: 一.父子通信 父组件通过props传递数据给子组件,子组件通过emit发送事件传递数 ...
- Build Post Office
Description Given a 2D grid, each cell is either an house 1 or empty 0 (the number zero, one), find ...
- 学习Spring-Data-Jpa(十)---注解式方法查询之@Query、@Modifying与派生delete
1.@Query 对于少量的查询,使用@NamedQuery在实体上声明查询是一种有效的办法,并且可以很好的工作.由于查询本身绑定到执行它们的java方法,实际上可以通过Spring-Data-Jpa ...
- (a2b_hex)binascii.Error: Non-hexadecimal digit found
HEX_CHAR = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'] 错误:16进制字 ...
- select类型的input
在选择类型一般都会用到下拉框 下拉选择类型 下拉框的类型就是在div中加一个select标签 然后在后面追加格式就行了 格式为 <select> <option value=&q ...
- 洛谷 P2746 [USACO5.3]校园网 Network of Schools 题解
Tarjan 模板题 第一问就是缩点之后看有多少个入度为零的点就好了. 第二问是在缩点后将每个点的入度和出度都求出(只要有入度或出度就置为1),然后比较哪个有值的多,将多的作为答案输出.原因是由题可得 ...
- Linux CentOS7 字符集
CentOS 7字符集的问题与6有点区别,会出现下面问题,查看是中文,vi进入就变成乱码了 生产中修改配置文件 [root@ce1d2002a999 ~]# cat /etc/locale.conf ...