小册子定制控制在一切前面

时间:2016-02-09 13:54:23

标签: javascript leaflet

我正在使用传单,并希望在我的传单地图上添加一些自定义控件。这工作得很好。不过我的问题是,这些自定义控件更多地位于地图前面而不是“#”;地图。

所以这里有一个例子来更好地理解我的意思:(导航栏与传单地图在同一个html文件中)

我有一个导航栏,下面是传单地图。小册子地图的左角是自定义控件(指南针)。所以现在当我使用导航栏中的下拉菜单时,我几乎无法点击选项,因为自定义控件位于其前面'并阻止了打击的屁股。 (见下图)。

有没有办法让自定义控件更多地放在地图上而不是地图前面?

这是我的自定义控件(指南针):

onAdd: function() {
        var controlDiv = L.DomUtil.create('div', 'leaflet-compass');
        L.DomEvent
          .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
          .addListener(controlDiv, 'click', L.DomEvent.preventDefault);
        var compassDiv = document.createElement('div');
        compassDiv.id = 'compassGroup';

        var compassImage = document.createElement('img');
        compassImage.id = 'cpImage';
        compassImage.setAttribute('src', 'images/kompass.png');

        var speedHeadline = document.createElement('h2');
        speedHeadline.id = 'speedHL';

        var arrowImage = document.createElement('img');
        arrowImage.id = 'arImage';

        arrowImage.setAttribute('src', 'images/arrow.png');
        controlDiv.appendChild(compassDiv);
        compassDiv.appendChild(compassImage);
        compassDiv.appendChild(arrowImage);
        controlDiv.appendChild(speedHeadline);
        return controlDiv;
      }
    });

L.control.compass = function(options) {
      return new L.Control.Compass(options);
    };

function initCompass(map, timestamp) {
      var compassControl = L.control.compass();
      map.addControl(compassControl);
      rotateCompass(timestamp);

    }

enter image description here

0 个答案:

没有答案