在Leaflet地图上添加div元素

问题描述

我需要将自己喜欢的文本添加到map div的中间位置，所以我需要：

<div id="map" style="height:300px;">
   <div style="width:150px;background-color:red; z-index:1000;"> Hello World !!</div>
</div>

这是我的简化JS代码：

<script>               
    $(document).ready(function () {
        var Lat = 32.646540;
        var Lon = 51.667743;
        map = L.map('map').setView([Lat,Lon],19);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            attribution: 'Thanks to OSM',maxZoom: 19
        }).addTo(map);               
    });
</script> 

问题是Red Text落后于地图，我无法管理它。 加载地图之前：

加载地图后：

解决方法

将您的Hello World div添加到更高的z-index，例如z-index: 9999

更新

现在我看到了。您将World div作为子级添加到地图。您必须将其添加为同级。

<div class="box"> Hello World</div>
<div id="map" style="height:300px;"></div>

CSS：

.box{
    position: absolute;
    top: 0;
    z-index: 9999;
    text-align: center;
    width: 150px;
    left: 50%;
    margin-left: -75px; /* half of the width */
    background-color:red;
}