javascript - 地图下的背景错误(地图中的背景问题)
问题描述
我是初学者 Web 开发人员,我对 Open Street Map 有疑问:https ://ibb.co/x8mqR62
我有这个代码:
<div id="mapdiv"></div>
<script type="text/javascript">
function onLocationFound(e) {
var radius = e.accuracy / 2;
lat = e.latlng.lat;
lng = e.latlng.lng;
L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!");
//L.circle(e.latlng, radius).addTo(map);
map.setView([lat, lng], 12);
}
function onLocationError(e) {
//alert(e.message);
console.log(e.message);
}
var map = L.map('mapdiv', {
editable: true,
fadeAnimation: false
}).setView([54.35070881441067, 18.641191756395074], 12);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
// L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18, zoomControl: true, detectRetina: true
}).addTo(map);
let myFilter = ['grayscale:100%'];
let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
filter: myFilter,
}).addTo(map);
// lc = L.control.locate({
// strings: {
// title: "Pokaż gdzie jestem"
// }
// }).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [25, 29],
iconAnchor: [25, 29],
popupAnchor: [-12, -22]
}
});
L.icon = function (options) {
return new L.Icon(options);
};
var icons = {
greenIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon19.png')}}'}),
redIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'}),
blackIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'})
}
var image = '';
$.ajax({
url: '{{url('/getPointForMap')}}',
method: 'get',
cache: false,
success: function (data) {
$.each(JSON.parse(data), function(i, poi) {
if (poi.photo != ''){
image = '<img src="'+poi.photo+'" class="mapImgF"><br/>';
}
L.marker([poi.lat, poi.lng], {icon: icons[poi.marker]}).addTo(map).addTo(map).bindPopup('<a href="'+poi.url+'">' + image + '<div class="mapTitleF">' + poi.name + '</div>' + '<div class="mapDescF"> ocena: ' + poi.score + '<br/>' + poi.price + ' </div></a>', {maxWidth: "auto", closeOnClick: true});
});
}
});
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 18});
</script>
<style type="text/css">
#mapdiv {
height: 600px;
width:100%;
}
</style>
这张地图工作正常,但我的问题是灰色背景。
我的地图在线预览: http: //serwer1356363.home.pl/pub/test/mapa.html
如何删除灰色背景并显示正常的彩色地图?
解决方案
这是 Leaflet 的常见问题。一种解决方案是使用window.dispatchEvent()
:
window.dispatchEvent(new Event('resize'));
调度窗口调整大小事件,该事件读取地图容器大小并在页面加载时相应地调整窗格。
推荐阅读
- python - 使用 Flask 改善 Python 中 HTTP 请求函数的延迟
- swift - Xcode / 斯威夫特 | 随时了解 UISwitch 是否打开
- java - Java递归求和的奇数
- mysql - 如何读取匹配同一字段中多个值的记录?
- c# - 通用基类覆盖非通用基类函数模式?(。网)
- javascript - 排序时,表体为空
- android - 如何在 Kotlin 中使用 StringDef 或 IntDef?
- docker - docker:“来自守护程序的错误响应:缺少签名密钥”
- postgresql - Postgres 使用 generate_series 搜索可用时隙
- bash - 上限日志文件大小