javascript - 高德地图marker动态绑定点击问题
PHP中文网
PHP中文网 2017-04-11 12:37:51
0
2
1660

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

认证高级PHP讲师

reply all(2)
巴扎黑

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

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);
}); 


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

阿神

不知道楼主现在解决了这个问题没有?
我现在也遇到类似的问题,我用ccs美化了content框,在使用marker.on时候无法显示效果,并且在第一次弹出content框之后,就无法再次显示出来。但是如果采用纯的文本框就可以正常显示。
希望好心人能看见并解答,在线等

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!