我正在使用OpenLayers为Angular编写一个 Map 应用程序,我想在复选框上添加一些事件 . 我创建了mat-button,里面有一个包含两个复选框的mat-menu .
所有 Map 组件都在app.component.ts文件中,带有复选框的菜单会创建一个app.component.html文件 .
app.component.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="header">
<mat-toolbar>OpenLayers</mat-toolbar>
<div class="menu">
<button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
<mat-menu #menu="matMenu">
<input type="checkbox" id="piscine" name="piscine" value="piscine">
<label for="subscribeNews">Piscines</label>
<br>
<input type="checkbox" id="piscine" name="piscine" value="piscine">
<label for="subscribeNews">Parkings</label>
</mat-menu>
</div>
</div>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</body>
</html>
在我的app.component.ts中我有这个代码,以便检索复选框状态,但这不起作用(此代码在简单的HTML文件中工作)
app.component.ts : (extract)
$('#piscine').on('change', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
this.map.addControl(this.vectorLayer_Piscine);
this.vectorLayer_Piscine.setStyle(piscine);
this.map.addOverlay(popup);
} else {
this.map.removeControl(this.vectorLayer_Piscine);
this.map.removeOverlay(popup);
}
});
$('#parking').on('change', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
this.map.addControl(this.vectorLayer_Parking);
this.vectorLayer_Parking.setStyle(markers);
this.map.addOverlay(popup);
} else {
this.map.removeControl(this.vectorLayer_Parking);
this.map.removeOverlay(popup);
}
});
使用此jQuery导入: import $ from 'jquery';
(我使用 npm install jquery
)
使用此代码,我只想在检查相应的复选框时在 Map 上显示一些标记 .
还有另一种检索复选框状态的方法吗?
2 回答
首先,我可以看到两个
在你的代码中 . 请更正它(ID和名称相同) .
接下来是不需要 Value 属性 . 去掉它 .
然后如下所示
在ts文件中,
希望对你有帮助!
app.component.ts :
app.component.html :