我把代码整理在同一个页面了，信息窗口里面的红色详情两字点击的时候事件绑定不上去，不知道什么问题，每个点都要绑定点击事件。下面的代码很多，只要看最后那部分就行了，其他都是样式和自定义的数据不看没事。好心欧巴，姐姐看看到底是什么原因绑定不上去。我用on绑定的没效果
<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
<head>
<meta http-equiv="Content-Type" charset="utf-8">
<title></title>
<style type="text/css">
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: ;
}
</style>
</head>
<body style="width: 100%;height: 100%;">
<!--主地图-->
<p id="map"></p>
<!--小地图-->
<p id="maptwo" class="maptwo"></p>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6ba34d19ab2e178335c4b72de804111c"></script>
<script type="text/javascript">
(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: '<p id="infowindow_detail" class="infowindow"><p><span>姓名：</span>'+nameId+'</p><p>'+contId+'</p></p>',
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 <provinces[0]['subDistricts'].length; 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='<p class="infowindow"><p class="clearfix spantwo-box"><span class="spanone fl">姓名：</span>'+nameId+'<span class="spantwo fr">详情</span></p><p>'+contId+'</p></p>';
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();
};
}
})()
</script>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你怎么一直在做高德地图。。
这个接口好像不好用，并不是回调时使用的。
不知道楼主现在解决了这个问题没有？
我现在也遇到类似的问题，我用ccs美化了content框，在使用marker.on时候无法显示效果，并且在第一次弹出content框之后，就无法再次显示出来。但是如果采用纯的文本框就可以正常显示。
希望好心人能看见并解答，在线等