请教一个关闭按钮执行的问题，很简单，会者举手之劳

zoujiaming 2015-01-14 03:41:32

我使用天地图，注册了一个marker，点击弹出自定义窗口，这个自定义窗口是html输出的，里面有一个关闭按钮，但我不明白为什么我执行不到关闭。

var map, zoom = 12, markerclick;
var customerWinInfo = null;
map = new TMap("mapDiv");

/<script>

    $(document).ready(function () {

        var map, zoom = 12, markerclick;

        var customerWinInfo = null;

        map = new TMap("mapDiv");



        $.ajax({

            url: "/Home/GetStations",

            type: "get",

            cache: false,

            success: function (result) {

                var json = eval("(" + result + ")");

                for (var i = 0; i < json.stations.length; i++) {

                    var lnglat = new TLngLat(parseFloat(json.stations[i].Longitude), parseFloat(json.stations[i].Latitude));

                    if (i == 0) {

                        map.centerAndZoom(lnglat, zoom);

                    }

                    var marker = new TMarker(lnglat);

                    marker.txt = json.stations[i].RecorderId;

                    //注册标注的点击事件 

                    (function () {

                        var m = marker;

                        markerclick = TEvent.addListener(m, "click", function (p) {

                            //alert("标注当前坐标：" + m.getLngLat().getLng() + "," + m.getLngLat().getLat() + " \nid : " + " \n自定义属性，随机数： " + m.txt);



                            var html = [];

                            html.push('<div style="background:#CCCC99;height:20px;color:#000;width:135px;">');

                            html.push('     <span style="width:100px;float:left;margin-left:2px;background:">自定义信息窗口</span><span  style="width:30px;float:right;margin-right:2px;" onclick="onClose();">关闭</span>');

                            html.push('</div>');

                            html.push('<div id="deliver-legend-ctrl" style="background:#fff;border:1px solid #C0C0C0;">');

                            html.push(' <table cellspacing="0" cellspadding="0" style="width:130px;border:1px solid #ff0000;">');

                            html.push('     <tr align="center" style="height:10px;">');

                            html.push('         <td></td>');

                            html.push('         <td><a herf="javascript:void(0);"></a></td>');

                            html.push('     </tr>');

                            html.push('     <tr align="center">');

                            html.push('         <td>经度:</td>');

                            html.push('         <td>' + m.getLngLat().getLng() + '</td>');

                            html.push('     </tr>');

                            html.push('     <tr align="center">');

                            html.push('         <td>纬度:</td>');

                            html.push('         <td>' + m.getLngLat().getLat() + '</td>');

                            html.push('     </tr>');

                            html.push('     <tr style="height:10px;">');

                            html.push('         <td></td>');

                            html.push('         <td><a herf="javascript:void(0);"></a></td>');

                            html.push('     </tr>');

                            html.push(' </table>');

                            html.push('</div>');

                            var config = {

                                offset: new TPixel(0, 0),

                                position: m.getLngLat()

                            };

                            customerWinInfo = new TLabel(config);

                            customerWinInfo.setTitle('');

                            customerWinInfo.setLabel(html.join(''));

                            customerWinInfo.getObject().style.zIndex = 10000;

                            map.addOverLay(customerWinInfo);

                            var obj = customerWinInfo.getObject();

                            var width = parseInt(obj.offsetWidth);

                            var height = parseInt(obj.offsetHeight);

                            var icon = this.getIcon();

                            var anchor_icon = icon.getAnchor();

                            var pixel = new TPixel(width / -2, height / -2 - anchor_icon[1]);

                            customerWinInfo.setOffset(pixel);

                            

                        });

                        

                    })();

                    //(function () {

                    //    var m = marker;

                    //    TEvent.addListener(m, "mouseout", function (p) {

                    //        map.removeOverLay(customerWinInfo);

                    //    });

                        

                    //})();

                    map.addOverLay(marker);

                }

            }



        });



        map.enableHandleMouseScroll();

        ////创建图片对象 

        //var icon = new TIcon("http://api.tianditu.com/img/map/markerA.png", new TSize(19, 27), { anchor: new TPixel(9, 27) });

        ////向地图上添加自定义标注 

        //var marker = new TMarker(new TLngLat(116.411794, 39.9068), { icon: icon });



    });



    



</script>

官方给出的关闭窗口的代码：map.removeOverLay(customerWinInfo);，只要执行这一句就可以了
如果我把代码写在onclick="function onClose(){map.removeOverLay(customerWinInfo); };
又会没有作用，这个程序段有一个闭包，所以我不知道把这个onClose()函数写到哪里可以正确执行map.removeOverLay(customerWinInfo);

...全文

203 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

Gao_yiliang 2015-01-14

打赏
举报

上述的例子是始终只有一个infowindow的情况，如果需要多个infowindow的话，需要将每个信息框存储起来，在注册关闭事件的时候指定要关闭的信息窗口就行

Gao_yiliang 2015-01-14

打赏
举报

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>天地图－地图API－范例－自定义信息窗口</title> <script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script> <script type="text/javascript" type="text/javascript"> var map,zoom=12; var customerWinInfo=null; function onLoad() { //初始化地图对象 map=new TMap("mapDiv"); //设置显示地图的中心点和级别 map.centerAndZoom(new TLngLat(116.40969,39.94940),zoom); //允许鼠标双击放大地图 map.enableHandleMouseScroll(); //模拟的数据 var json = { "stations" : [{ "Longitude" : 116.404, "Latitude" : 39.915, "RecorderId": 1 },{ "Longitude" : 116.383752, "Latitude" : 39.91334, "RecorderId": 2 },{ "Longitude" : 116.384502, "Latitude" : 39.932241, "RecorderId": 3 } ] }; //循环添加点 for (var i = 0; i < json.stations.length; i++) { var lnglat = new TLngLat(parseFloat(json.stations[i].Longitude), parseFloat(json.stations[i].Latitude)); if (i == 0) { map.centerAndZoom(lnglat, zoom); } var marker = new TMarker(lnglat); //使用闭包的形象注册事件 (function () { //在闭包中保存的局部变量 var m = marker; var id = json.stations[i].RecorderId; //注册单击事件 markerclick = TEvent.addListener(m, "click", function(){ onClick(m, id); }); })(); map.addOverLay(marker); } } //关闭信息窗 function onClose(){ map.removeOverLay(customerWinInfo); } //单击点 function onClick(marker, id){ var html=[]; html.push('<div style="background:#CCCC99;height:20px;color:#000;width:135px;">'); html.push(' <span style="width:100px;float:left;margin-left:2px;background:">标题'+id+'</span><span style="width:30px;float:right;margin-right:2px;" onclick="onClose();">关闭</span>'); html.push('</div>'); html.push('<div id="deliver-legend-ctrl" style="background:#fff;border:1px solid #C0C0C0;">'); html.push(' <table cellspacing="0" cellspadding="0" style="width:130px;border:1px solid #ff0000;">'); html.push(' <tr align="center" style="height:10px;">'); html.push(' <td></td>'); html.push(' <td><a herf="javascript:void(0);"></a></td>'); html.push(' </tr>'); html.push(' <tr align="center">'); html.push(' <td>经度:</td>'); html.push(' <td>'+marker.getLngLat().getLng()+'</td>'); html.push(' </tr>'); html.push(' <tr align="center">'); html.push(' <td>纬度:</td>'); html.push(' <td>'+marker.getLngLat().getLat()+'</td>'); html.push(' </tr>'); html.push(' <tr style="height:10px;">'); html.push(' <td></td>'); html.push(' <td><a herf="javascript:void(0);"></a></td>'); html.push(' </tr>'); html.push(' </table>'); html.push('</div>'); var config = { offset:new TPixel(0,0), position:marker.getLngLat() }; if(customerWinInfo) { onClose(); } customerWinInfo=new TLabel(config); customerWinInfo.setTitle(''); customerWinInfo.setLabel(html.join('')); customerWinInfo.getObject().style.zIndex = 10000; map.addOverLay(customerWinInfo); } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv" style="position:absolute;width:600px; height:500px;"></div> </body> </html>

Go 旅城通票 2015-01-14

打赏
举报

没用过这个地图，下面的这setLabel不知道是否支持设置DOM对象，如果支持你需要创建DOM对象，这样才可以添加闭包事件 customerWinInfo.setLabel(html.join('')); 否则你要将map和customerWinInfo变量都设置为widow作用域下的。。你在$里面申明，只在那个匿名函数中能引用到。字符串里面设置的事件是window作用域下的才能访问

垃圾分类，举手之劳.docx

从举手之劳做起.pdf

保护环境只需举手之劳.pdf

举手之劳,垃圾分类,从我做起.docx

从举手之劳做起，不乱扔垃圾.ppt