问题描述
tl; dr
display: flex;仅适用于Firefox，不适用于chrome或edge。标记上的弹出窗口可以正常工作。
长版本：
我有点在滥用leaflet.draw来让用户插入图像叠加层。我通过让用户绘制一个矩形，抓住相关的角并使用它来放置图像叠加层来实现此目的。图像本身由用户通过一些表单字段上载。这些显示在我在绘制矩形的中心位置打开的弹出窗口中。代码如下所示，重要的部分是最后一行：
popup.openOn(map)它在Firefox中运行良好，但是在Chrome或Edge中没有打开任何弹出窗口，并且控制台中未显示任何错误或警告。
注释：
- 我确实使用了responsePopup插件，但已经使用常规L.popup对其进行了测试，并获得了 结果相同。
- 标记的弹出窗口在所有浏览器中均可正常运行。
- 如果我用
map.on('draw:created',function (event) { if (event.layerType === 'rectangle') { insertImage(event); } } function insertImage(event){ layer = event.layer,feature = layer.feature = layer.feature || {}; // Intialize layer.feature feature.type = feature.type || "Feature"; // Intialize feature.type props = feature.properties = feature.properties || {}; // Intialize feature.properties props.imageURL = ""; // Define the necessary feature properities -> imageURL and zoomLevels props.zoomLevel = minZoom+1; props.endZoomLevel = maxZoom; var editablePopup = L.responsivePopup({maxWidth: "auto"}); // create the popup and afterward the content for it imageBounds = layer.getBounds(); // get the bounding box of the rectangle aka its NE and SW corner content = imageForm("",props.zoomLevel,props.endZoomLevel,imageBounds,"create"); //create the form in the popup editablePopup.setContent(content); // add the content to the popup event.layer.addTo(map); //we need to add the event layer to the map in order be use the getCenter method to place the popup editablePopup.setLatLng(event.layer.getCenter()); //the popup will open at the center of the drawn rectangle map.removeLayer(event.layer); //now we can get rid of the layer and remove it from the map editablePopup.openOn(map); //open the popup };替换最后一行，即使在Firefox中，它也无法一起工作。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）