87,987
社区成员
发帖
与我相关
我的任务
分享请教一个关闭按钮执行的问题，很简单，会者举手之劳
我使用天地图，注册了一个marker，点击弹出自定义窗口，这个自定义窗口是html输出的，里面有一个关闭按钮，但我不明白为什么我执行不到关闭。
var map, zoom = 12, markerclick;
var customerWinInfo = null;
map = new TMap("mapDiv");
官方给出的关闭窗口的代码：map.removeOverLay(customerWinInfo);，只要执行这一句就可以了
如果我把代码写在onclick="function onClose(){map.removeOverLay(customerWinInfo); };
又会没有作用，这个程序段有一个闭包，所以我不知道把这个onClose()函数写到哪里可以正确执行map.removeOverLay(customerWinInfo);
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);
...全文
请发表友善的回复…
发表回复
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>
斯洛文尼亚旅游 2015-01-14
- 打赏
- 举报
没用过这个地图，下面的这setLabel不知道是否支持设置DOM对象，如果支持你需要创建DOM对象，这样才可以添加闭包事件
customerWinInfo.setLabel(html.join(''));
否则你要将map和customerWinInfo变量都设置为widow作用域下的。。你在$里面申明，只在那个匿名函数中能引用到。字符串里面设置的事件是window作用域下的才能访问
