[英]Leaflet customcontrol - Angular 2+
I need to integrate a custom form control in my Angular2+ component: 我需要在Angular2 +组件中集成自定义表单控件:
export class HeatMapComponent {
...
onMapReady(map: L.Map) {
let div = L.DomUtil.create('div', 'info');
let info = new L.Control();
info.onAdd = () => {
return div;
};
info.addTo(map);
}
}
And the .hmtl file like this: 和.hmtl文件是这样的:
<div class="map container-fluid"
leaflet [leafletOptions]="options"
[leafletLayersControl]="layersControl"
(leafletMapReady)="onMapReady($event)">
</div>
The .css: .css:
...
.info {
padding: 2rem 1rem;
margin-left: 70rem;
margin-right: 15rem;
font: 1rem/1.5rem Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
In the leaflet documentation it's written in JS like this: 在传单文档中,它用JS编写,如下所示:
var info = L.control();info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
Why can't I integrate the addTo method in my onMapReady? 为什么我不能在我的onMapReady中集成addTo方法? I don't get any errors but nothing is displayed on my map.
我没有收到任何错误,但我的地图上没有显示任何内容。
i solved this problem the solution is: 我解决了这个问题的解决方案是:
onMapReady(map: leaflet.Map) {
let div = leaflet.DomUtil.create('div', 'infoControl');
let info = new leaflet.Control(); info.onAdd = () => {
return div;
};
console.log(div);
info.addTo(map);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.