Question

有没有人有MapBox经验？

我正在尝试使用特定标记来实现个人地图，并具有平移和缩放功能。我试图实现直接来自MapBox网站的the code from the website。但是，当我在我自己的页面中实现时，我得到了以下内容：

enter image description here

正如您所看到的那样，标记周围会出现奇怪的镶板效果以及白色块。这种地图非常无效，所以我希望有人知道解决方案。

这是我使用的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pan and vertical zoom</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; height:500px}
</style>
</head>
<body>


<style>
.ui-control {
  font:bold 12px/28px Helvetica, sans-serif;
  text-align:center;
  position:absolute;
  top:10px;
  left:10px;
  z-index:1000;
  }

.ui-pan {
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  }
  .ui-pan .panner {
    background:#fff;
    color:#404040;
    font-size:9px;
    position:absolute;
    top:0;
    left:0;
    width:28px;
    height:28px;
    border:1px solid rgba(0,0,0,0.4);
    border-radius:3px;
    }
    .ui-pan .panner:hover { background-color:#f8f8f8; color:#404040; }
    .ui-pan .panner.up    { left:28px; }
    .ui-pan .panner.right { left:58px; top:28px; }
    .ui-pan .panner.down  { left:28px; top:58px; }
    .ui-pan .panner.left  { top:28px; }

.ui-zoombar {
  background:#FFF;
  position:relative;
  top:93px;
  left:28px;
  width:28px;
  height:200px;
  border:1px solid rgba(0,0,0,0.4);
  border-radius:3px;
  cursor:pointer;
  }
  .ui-zoombar:hover { background-color:#f8f8f8; }
  .ui-zoombar .handle {
    position:absolute;
    cursor:pointer;
    width:26px;
    height:28px;
    background:#404040;
    color:#fff;
    border-radius:2px;
    }
    .ui-zoombar .handle:hover { background:#303030; }

</style>

<div class='ui-control'>
  <div id='pan' class='ui-pan'>
    <a href='#' id='up' class='panner up'>&#9650;</a>
    <a href='#' id='right' class='panner right'>&#9654;</a>
    <a href='#' id='down' class='panner down'>&#9660;</a>
    <a href='#' id='left' class='panner left'>&#9664;</a>
  </div>
  <div id='zoom-bar' class='ui-zoombar dragdealer'>
    <div id='handle' class='handle'>0</div>
  </div>
</div>

<div id='map'> </div>

<!-- If you plan to use this example, download dragdealer from
https://code.google.com/p/dragdealer/ instead of hotlinking it like this -->
<script src='https://dragdealer.googlecode.com/svn/tags/0.9.5/dragdealer.js'></script>
<script>
var zooms = 19;
var handle = document.getElementById('handle');
var map = L.mapbox.map('map', 'tlchang.ikgi2358', {
    zoomControl: false
  })
  .setView([42.0, -3.5], 2);

// Configure Dragdealer to update the map zoom
var zoom_bar = new Dragdealer('zoom-bar', {
    steps: zooms,
    snap: true,
    horizontal: false,
    vertical: true,
    callback: function(x, y) {
        var z = y * (zooms - 1);
        map.setZoom(z);
        handle.innerHTML = z;
    }
});

// Round the zoom value the number looks presentable.
map.on('zoomend', function() {
    var z = Math.round(map.getZoom());
    zoom_bar.setValue(0, z / 19);
    handle.innerHTML = z;
});

document.getElementById('left').onclick = function(e)  { e.preventDefault(); map.panBy([-100, 0]); };
document.getElementById('right').onclick = function(e) { e.preventDefault(); map.panBy([100, 0]);  };
document.getElementById('down').onclick = function(e)  { e.preventDefault(); map.panBy([0, 100]);  };
document.getElementById('up').onclick = function(e)    { e.preventDefault(); map.panBy([0, -100]); };
</script>


</body>
</html>

任何想法？！

Answer 1

此示例有效fine on its own。

然而，当我在我自己的页面中实现时，我得到了以下内容：

这可能是个问题。如果你可以提供一个链接到你自己的页面，那么这将有所帮助 - 你可能有一些过于急切的CSS规则导致了这个问题。

面板划分和MapBox中标记周围的白色标记

1 个答案: