javascript - 高德地图marker动态绑定点击问题

PHP中文网2017-04-11 12:37:51 0 2 282

我把代码整理在同一个页面了，信息窗口里面的红色详情两字点击的时候事件绑定不上去，不知道什么问题，每个点都要绑定点击事件。下面的代码很多，只要看最后那部分就行了，其他都是样式和自定义的数据不看没事。好心欧巴，姐姐看看到底是什么原因绑定不上去。我用on绑定的没效果

html,body,p,span,h1,h2,h3,h4,h5,h6,p,a,em,strong,img,ul,li,ol,dl,dt,dd,form,label,input,textarea,th,td,button { margin: 0; padding: 0;}

body,input,textarea,select,button { font: 12px/1.5 Arial,"宋体", Verdana, sans-serif;}

body { background: #fff; color: #333;}

ul,ol { list-style: none;}

h1,h2,h3,h4,h5,h6 { font-size: 100%;}

em,strong { font-style: normal;}

a,img,border,input { border: none;}

a { color: #333; outline: none; text-decoration: none;}

a:hover { color: #f76120; transition: none;}

img { display:block}

img,label,input { vertical-align: top;}

:focus { outline: none;}

button::-moz-focus-inner { border:0 none; padding:0;}

textarea { overflow: auto; resize: none; vertical-align: top;}

table { border-collapse: collapse; border-spacing: 0; empty-cells: show;}

table th { padding: 4px;}

table td { padding: 4px; word-wrap: break-word; word-break: break-all;}

.fl { float: left;}

.fr { float: right;}

.hide { display: none;}

.clear { clear: both;}

.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}

.clearfix { zoom: 1;}

span{display: inline-block;}

.searchbox{position: absolute;top: 3%;left: 12%}

#map{width:100%;height:100%;}

.active td{

font-weight: bold;

}

.seldetails{display: none;}

.circle{

border-radius: 50%;

border: solid 1px silver;

width: 35px;

padding: 3px;

text-align: center;

line-height: 18px;

max-width: 50px;

color:white;

opacity: 0.5

}

.sircle{

border-radius: 50%;

border: solid 1px silver;

width: 35px;

padding: 3px;

text-align: center;

line-height: 18px;

max-width: 50px;

color:white;

opacity: 0.5

}

.progress{

margin-bottom: 0;

}

.dropdown-toggle{

background:#dff0d8;

}

#lifeNumber{

position: relative;

box-shadow: 5px 5px 10px #dff0d8;

border-radius: 10px;

}

#lifeNumber tr{

font-seize:18px;

color: green;

}

#lifeNumber .lifeValue{

font-weight: bold;

color:grey;

}

.blue{

background:#d9edf7;

font-weight: bold;

}

.maptwo{

width: 300px;

height: 300px;

position: absolute;right: 0;bottom: 0;

border: 6px solid #dff0d8;

}

.btn-group-box{

position: absolute;

top: 20px;

right: 5%;

}

.btn-group .btn{

height: 35px;

width: 160px;

}

.headsearch{

position: absolute;

top: 20px;

left: 300px;

width: 500px

}

.input-group-addon{

cursor: pointer;

}

.safetips{

position: absolute;bottom: 50%;right: 1%;

background:rgba(255,255,255,0.2);

border-radius: 5px;

overflow:hidden;

}

.safetips p{

font-size: 12px;

color: #333;

font-weight: bold;

cursor: pointer;

}

.safepicone{

background: url(http://www.haotu.net/up/1155/16/152.png) no-repeat left center;

padding: 15px 18px;

}

.safepictwo{

background: url(http://www.haotu.net/up/1155/16/151.png) no-repeat left center;

padding: 15px 18px;

}

.safepicthree{

background: url(http://www.haotu.net/up/1155/16/156.png) no-repeat left center;

padding: 15px 18px;

}

.safepicfour{

background: url(http://www.haotu.net/up/1155/16/153.png) no-repeat left center;

padding: 15px 18px;

}

.infowindow{

width:180px;height:250px;

border:2px solid #d9edf7;

background:rgba(255,255,255,0.5)

}

.infowindow p{

display:inline-block;

width:100%;

font-size:12px;

background:#dff0d8;

}

.infowindow p{

line-height: 35px;

}

.infowindow span{

font-weight: bold;

}

.spantwo{

cursor:pointer;

padding:0 5px;

color:red;

}

.alldetail{

display: ;

}

(function(){

var provinces = [{

"name": "无锡市",

"center": "120.30,31.57",

"count": 1000,

"subDistricts": [{

"name": "姓名2",

"center": "120.301653,31.714511",

"count": 100,

"level":27,

"intro":'描述内容病情不咋的'

}, {

"name": "姓名3",

"center": "120.452127,31.679837",

"count": 151,

"level":73,

"intro":'描述内容病情海阔以'

}, {

"name": "姓名",

"center": "120.36787,31.601701",

"count": 300,

"level":91,

"intro":'描述内容病情阔以的'

}, {

"name": "姓名4",

"center": "120.514262,31.718799",

"count": 250,

"level":81,

"intro":'描述内容还行吧病情'

}, {

"name": "姓名1",

"center": "120.417312,31.670304",

"count": 152,

"level":60,

"intro":'描述内容病情刚刚好转'

}, {

"name": "姓名5",

"center": "120.328892,31.676005",

"count": 350,

"level":27,

"intro":'描述内容病情有点严重'

}, {

"name": "姓名6",

"center": "120.416021,31.817622",

"count": 153,

"level":82,

"intro":'描述内容病情良好'

}, {

"name": "姓名7",

"center": "120.441488,31.612066",

"count": 100,

"level":92,

"intro":'描述内容身体非诚好'

}, {

"name": "姓名8",

"center": "120.419183,31.657441",

"count": 200,

"level":72,

"intro":'描述内容12341'

}, {

"name": "姓名8",

"center": "120.411291,31.623093",

"count": 250,

"level":62,

"intro":'描述内容12342'

}, {

"name": "姓名9",

"center": "120.517051,31.651538",

"count": 250,

"level":91,

"intro":'描述内容2342'

}, {

"name": "姓名00",

"center": "120.547198,31.741203",

"count": 50,

"level":60,

"intro":'描述内容1324242'

}, {

"name": "姓名09",

"center": "120.371897,31.682728",

"count": 100,

"level":93,

"intro":'描述内容12342341'

}, {

"name": "姓名009",

"center": "120.307645,31.782202",

"count": 50,

"level":83,

"intro":'描述内容4124234'

}, {

"name": "姓名1",

"center": "120.307645,31.792222",

"count": 50,

"level":42,

"intro":'描述内容12423'

}]}];

var map = new AMap.Map("map", {

resizeEnable: true,

doubleClickZoom:true,

zoom:6,

//地图显示的缩放级别

});

//alert(mapOtherZoom);

var mapOther = new AMap.Map("maptwo",{

resizeEnable:true,

zoom:8,

doubleClickZoom:true, });

map.setCity('无锡');

var newmarkers = []; //province见Demo引用的JS文件

var infowindow = new AMap.InfoWindow({

isCustom: true, //使用自定义窗体

//content: '

姓名：'+nameId+'

'+contId+'

',

offset: new AMap.Pixel(16, -45)

});

function markerClick(e){

//console.log(e.target.content);

//alert( e.target.getPosition())

infowindow.setContent(e.target.content);

infowindow.open(map, e.lnglat);

}

for (var i = 0; i

//console.log(i);

var newlnglat = provinces[0]['subDistricts'][i]['center'].split(',');

var safelevel = provinces[0]['subDistricts'][i]['level'];

var webdress;

var nameId=provinces[0]["subDistricts"][i]["name"];

var contId=provinces[0]['subDistricts'][i]["intro"];

if (safelevel>=85) {

webdress='http://www.haotu.net/up/1155/16/152.png';

}else if(safelevel>=75&&safelevel<85){

webdress='http://www.haotu.net/up/1155/16/156.png';

}else if(safelevel==60){

webdress='http://www.haotu.net/up/1155/16/153.png';

}else{

webdress='http://www.haotu.net/up/1155/16/151.png'

}

var newmarker = new AMap.Marker({

position: newlnglat,

icon: webdress,

//offset: {x: -8,y: -34}

});

newmarker.content='

姓名：'+nameId+'详情

'+contId+'

';

AMap.event.addListener(newmarker, 'click', function(e){

infowindow.setContent(e.target.content);

infowindow.open(map, e.target.getPosition());

//alert($('.spantwo').className)

//alert(typeof e.target.content);

});

//newmarker.on('click', markerClick);

//newmarker.emit('click', {target: newmarker});

newmarkers.push(newmarker);

};

// 添加点聚合

function addCluster() {

map.plugin(["AMap.MarkerClusterer"], function() {

var cluster = new AMap.MarkerClusterer(map, newmarkers);

});

};

addCluster();

function _clsoeInfoWindow(){

if(map.getZoom()<13){

//alert("1");

infowindow.close();

};

}

})()

回答

2

0

分享

全部回复 (2)

巴扎黑2017-04-11 12:39:512楼

你怎么一直在做高德地图。。

AMap.event.addListener(newmarker, 'click', function(e){

infowindow.setContent(e.target.content);

infowindow.open(map, e.target.getPosition()); // 这里是异步的

alert();

setTimeout(function(){

console.log($('.infowindow').length);

AMap.event.addDomListener($('.infowindow')[0],'click',function(){

console.log(arguments)

})

}, 1);

});

这个接口好像不好用，并不是回调时使用的。

回复

阿神2017-04-11 12:39:511楼

不知道楼主现在解决了这个问题没有？

我现在也遇到类似的问题，我用ccs美化了content框，在使用marker.on时候无法显示效果，并且在第一次弹出content框之后，就无法再次显示出来。但是如果采用纯的文本框就可以正常显示。

希望好心人能看见并解答，在线等

回复

php 高德地图点击事件,javascript - 高德地图marker动态绑定点击问题相关推荐

  1. php 连续点击事件,javascript设置连续两次点击按钮时间间隔的方法_javascript技巧...

    本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法,分享给大家供大家参考.具体实现方法如下: 很多时候我们在实际应用中,可能并不希望按钮联系被不间断的点击,所以要限定一定的时间间隔才 ...

  2. 大屏页面使用transform属性scale进行缩放，高德地图点击事件失效，地图展示模糊

    这里写自定义目录标题 大屏页面使用transform属性scale进行缩放,高德地图点击事件失效,地图展示模糊 1.大屏缩放自适应时使用tansform scale 缩放 1.1.window.res ...

  3. html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...

    js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...

  4. js手动触发页面元素点击事件，程序触发，自定义点击事件模拟点击

    页面有时候的使用场景需要手动控制某个元素响应点击事件,可以达到不直接点击元素来响应事件,这里可以使用element.dispatchEvent(),在使用element.dispatchEvent() ...

  5. 关于Echarts柱状图点击事件的实现方法charsjs柱状图点击事件

    关于Echarts柱状图点击事件的实现方法 charsjs柱状图点击事件 ajax请求数据 var chartDom = document.getElementById('riskmain'); va ...

  6. php鼠标点击事件,javascript模拟鼠标点击事件的实例代码

    javascript触发模拟鼠标点击事件 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法. 一般 ...

  7. echarts 地图去除点击事件_echarts 取消图例上的点击事件和图表上鼠标滑过点击事件...

    备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消 鼠标滑过的提示框 tooltip : { trigger: 'item', show:false, formatter: " ...

  8. html页面设置不可点击事件,css怎么设置div不可点击？

    这篇文章介绍的是通过纯CSS实现禁止div的鼠标点击事件,比起Javascript来更加灵活,有需要的可以参考学习. css怎么设置div不可点击? JavaScript有一个preventDefau ...

  9. java的按钮点击事件_[转载]java处理按钮点击事件

    不同的事件源可以产生不同类别的事件.例如,按钮可以发送一个ActionEvent对象,而窗口可以发送WindowEvent对象. AWT时间处理机制的概要: 1.监听器对象是一个实现了特定监听器接口( ...

最新文章

  1. 企业网络推广——企业网络有推广专员如何做好基本的网站优化布局
  2. mysql本地连接报错1130_mySql连接问题(本地连接加远程连接)
  3. 腾讯安全平台部专家研究员胡育辉：千亿黑产背后的破局之道
  4. mysql第七章课后答案_mysql核心内幕第七章-查询解析与优化器
  5. postman 使用_postman如何使用集合断言？
  6. 直接上手！不容错过的 Visual Studio Code 十大扩展组件
  7. Javascript基础之Array数组API
  8. 富文本编辑器中空格转化为a_文本编辑器题解
  9. R资讯| 广州R会第三批嘉宾揭晓！！
  10. 电脑记事本中文都乱码了解决方法
  11. 关于假人皮肤外侧热传导问题的差分法求解
  12. EDEM后处理导出颗粒信息
  13. 业界 | 数据科学家要先学逻辑回归？图样图森破！
  14. 时钟服务器工作原理,NTP时钟同步服务器
  15. 【springboot】mybatis-generator配置
  16. CSDN:2021博客之星年度总评选大赛投票
  17. laravel过滤富文本提交的标签(防止XSS等js脚本攻击)
  18. API数据接口该怎么对接
  19. [牛客算法总结]：青蛙跳台阶
  20. 配置python环境变量_星座般配，星座般配图

热门文章

  1. c语言 operator,C语言讲义——运算符（operator）
  2. MDF智能合约靠谱吗？
  3. crmeb 多商户app打包教程
  4. 中小企业如何进行云灾备？
  5. 各地光热发电示范项目可研陆续结束 明年将迎开工潮
  6. 女生学python难吗_女生学数据分析好吗？数据分析适不适合女生学？
  7. 114 Three.js实现深度遮挡的下雨特效
  8. 学习大数据，公司常用开发的编程语言是什么？
  9. LocalBroadcastManager已被废弃
  10. 神经网络（二）：Softmax函数与多元逻辑回归