Question

我已将我的徽标添加到地图中，但当我以全屏方式打开地图时，徽标就会消失。我试图改变全屏模式的CSS。我正在使用传单中的那个。到目前为止，我找不到原因。

$(document).ready(
    function init() {
      // initiate leaflet map
      var map = new L.Map('map', {
        center: [51, 9],
        zoom: 4,
        minZoom: 3,
        maxZoom: 18
      });

      //load basemap
      var OSM = new L.tileLayer('http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      }).addTo(map);

      //load data from CartoDB
      var layerUrl = 'http://xyz.cartodb.com/api/v2/viz/0931f2164e4-76f8-1190d/viz.json';

      cartodb.createLayer(map, layerUrl)
        .addTo(map)
        .on('done', function() {}).on('error', function() {});
    };
    // create a fullscreen button and add it to the map
    L.control.fullscreen({
      position: 'topleft', // change the position of the button can be topleft, topright, bottomright or bottomleft, defaut topleft
      title: 'Open fullscreen', // change the title of the button, default Full Screen
      titleCancel: 'Exit fullscreen mode', // change the title of the button when fullscreen is on, default Exit Full Screen
      content: null, // change the content of the button, can be HTML, default null (in this case its chnaged in css)
      forceSeparateButton: true
    }).addTo(map);

    // events are fired when entering or exiting fullscreen.
    map.on('enterFullscreen', function() {
      console.log('entered fullscreen');
    });

    map.on('exitFullscreen', function() {
      console.log('exited fullscreen');
    });

<html>
  <head>
    <meta charset="utf-8">
    <title>Karte</title>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" type="text/css">
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js" type="text/javascript"></script>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #cartodb-map {
        width: 100%;
        height: 100%;
        background: black;
        z-index: 1;
      }
      #logo {
        width: 7%;
        height: 4%;
        position: absolute !important;
        bottom: 1%;
        left: 1%;
        z-index: 2147483647;
        opacity: 0.75;
      }
    </style>
    <!-- load java script -->

    <script language="javascript" type="text/javascript" src="script.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" type="text/css">
    <!-- fullscreen button-->
    <link rel="stylesheet" href="/Control.FullScreen.css" type="text/css">
    <script src="Control.FullScreen.js" type="text/javascript">
    </script>
    <!-- logo-->
  </head>
  <body>
    <img id="logo" src="img/imm_infinto.png" alt="Logo">
    <!-- load map -->
    <div id='map'></div>
    <div onload="init()"></div>
  </body>
  </html>

徽标在全屏模式下消失

0 个答案: