Question

我的index.html中有这个模态：

 <div id="myModal" class="modal">
   <span class="close1">&times;</span>
   <div id="mapImage1"></div>
   <div id="caption"></div>
 </div>

<div id="mapImage1">是宣传单地图<div>

然后我有了函数，它应该将Leaflet映射加载到模态中。参数图像是我想在传单地图上显示的图像。

function modalImage(modal,image,modalDiv,text,close) {
// Get the modal

var modal = document.getElementById(modal);
var img = document.getElementById(image);
var modalDiv = document.getElementById(modalDiv);
console.log(modalDiv);
var captionText = document.getElementById(text);
img.onclick = function () {
    modal.style.display = "block";
    initLeafletimage(modalDiv,img);
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName(close)[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
    modal.style.display = "none";
}
}

地图本身由此代码生成：

function initLeafletimage(map,image){
console.log(image.src)
var imgDimensions={width:300, height:300} //this is the height and width of the image. It hasn't been loaded yet.

var map = L.map(map, {
    maxZoom: 24,
    minZoom: -24,
    crs: L.CRS.Simple
}).setView([imgDimensions.height/2, imgDimensions.width/2], 0);

var imageUrl = image.src;
var imageBounds = [
    [imgDimensions.width , 0],
    [0, imgDimensions.height]
];

L.imageOverlay(imageUrl, imageBounds).addTo(map);
}

modalImage('myModal','left','mapImage1','caption','close1');

地图甚至没有出现在模态中。

我错过了什么？

Answer 1

不幸的是，就像@ghybs指出的那样，我错过了定义地图div的高度和宽度。这就是没有地图的原因。使用此css，它可以完美运行：

#mapImage1{
  height: 100%;
  width: 100%;
  position: fixed;
}

模态中的传单地图

1 个答案: