Angular 13传单无法正确渲染地图
我正在遇到一个问题，当我尝试在Angular 13中使用传单渲染地图时，我会得到以下...
我有flue.css and styles.css.css加载在aggular.json文件中...
"styles": ["src/styles.scss",
"node_modules/leaflet/dist/leaflet.css"]
我有app.component.ts中加载的feflet.css and styles.css.css ...
styleUrls: ['./on-site-proctor-locator.component.scss',
'../../../../../node_modules/leaflet/dist/leaflet.css']
在app.com.ponent中。
this.map = L.map('map').setView([ lat, lon ], zoom);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a>' +
'© <a href="openstreetmap.org">OpenStreetMap</a> contributors'
});
tiles.addTo(this.map);
<div id="map" class="map-div"></div>
我。我将感谢有关解决这个问题的任何建议。谢谢。
I am having an issue where when I attempt to render a map using Leaflet in Angular 13, I am getting the following...
I have the leaflet.css and styles.css loaded in the angular.json file...
"styles": ["src/styles.scss",
"node_modules/leaflet/dist/leaflet.css"]
I have the leaflet.css and styles.css loaded in the app.component.ts...
styleUrls: ['./on-site-proctor-locator.component.scss',
'../../../../../node_modules/leaflet/dist/leaflet.css']
In the app.component.ts file, here is where I initialize the map...
this.map = L.map('map').setView([ lat, lon ], zoom);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a>' +
'© <a href="openstreetmap.org">OpenStreetMap</a> contributors'
});
tiles.addTo(this.map);
Here is what I have setup in the app.component.html file for the div...
<div id="map" class="map-div"></div>
I have looked at other posts of similar struggles and have found nothing that has helped me. I would appreciate any suggestions on what I can do to resolve this issue. Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这对我有用（Angular 14项目+传单1.8）：
在这条线上
增加了宽度和高度，以读取此类
传单需要可见容器，并且具有参考宽度/高度才能正确渲染。
我希望它有帮助
this is what worked for me (angular 14 project+leaflet 1.8):
on this line
add a width and height, to read something like this
leaflet requires the container to be visible, and have a reference width/height in order to render correctly.
I hope it helps