2

我在 Polymaps 中发现了一个错误，但还没有找到确切的原因。最近的某个时候，我的 Polymaps.js (2.5.1) 的本地副本停止将地图显示为容器的完整大小，而是仅显示 300 像素 x 150 像素的视图。我还在 Polymaps.org 网站上看到了这种行为。

CSS 样式表有：

div#map {
  position: relative;
  border: solid 4px #ccc;
  background: #eee;
  width: 1800px;
  height: 800px;
}

HTML页面有：

<div id="map"></div>

JavaScript 地图代码有：

var map = po.map()
    .container(document.getElementById("map").appendChild(po.svg("svg")))
    .add(po.image().url("grid.png"))
    .zoomRange([1, 12])
    .zoom(11)
    .add(po.image().url("http://192.168.1.1:4444/tiles/{Z}/{X}/{Y}.png"))
    .add(po.interact())
    .add(po.compass());         // zoom and pan compass control

结果 0：

<svg class="map">
<rect visibility="hidden" pointer-events="all" width="300" height="150"></rect>

但是，svg.map 的实际大小为 300px x 150px。CSS 中的地图 div 未用于调整地图的大小。我认为选择容器（document.getElementById（“map”））的目的是在容器大小之间转移......

实验 1：将这一行添加到上面的 JavaScript 地图代码中（在 .container 之后）：

.size({"x": 1600, "y": 1000})

结果 1：

<svg class="map">
  <rect visibility="hidden" pointer-events="all" width="1600" height="1000"></rect>

这会更改矩形大小，但是如果您检查 svg.map 大小，它仍然是 300 像素 x 150 像素。

实验 2：在浏览器调试控制台元素列表中选择以下元素：

<svg class="map">

更改样式选项卡下元素的大小，当前为 300 x 150。修改为 1100 x 700。

结果 2：

<svg class="map" style="
    width: 1100px;
    height: 700px;
">
    <rect visibility="hidden" pointer-events="all" width="1600" height="1000"></rect>

现在可查看的地图区域为 1100px x 700px。

在 Chrome 中调试，我在 polymaps.js?2.5.1 的第 491 行放了一个断点：return map.resize(); // 推断大小

然后检查当时的局部变量。

x: svg
  attributes: NamedNodeMap
  .
  .
  .
  height: SVGAnimatedLength
    animVal: SVGLength
    baseVal: SVGLength
      unitType: 2
      value: 150
      valueAsString: "100%"
      valueInSpecifiedUnits: 100
    __proto__: SVGLength
  __proto__: SVGAnimatedLength
  .
  .
  .
  width: SVGAnimatedLength
    animVal: SVGLength
      unitType: 2
      value: 300
      valueAsString: "100%"
      valueInSpecifiedUnits: 100
    __proto__: SVGLength
  baseVal: SVGLength
  __proto__: SVGAnimatedLength

似乎 Polymaps 通过推断 SVGAnimatedLength 的某些默认值来获取地图大小，而不是使用 map.size() 函数来获取容器大小或正确。我的猜测是 SVG 标准或实现以某种方式发生了变化，而 Polymaps 没有处理它（现在是 2011 代码）。

谁能帮忙找出问题所在？最好修复它！将不胜感激。谢谢。杰米

4

1 回答 1

1

我也看到了这个，我也遇到了同样的问题。

我通过给容器全宽然后将地图类设置为相同大小来将其固定在样式表中 - 请注意 svg 包装器具有地图类

#vipMap, #vipMap .map {width:998px; height:400px; background:#666;}
#vipMap {border:1px solid #CCC; position:relative; overflow:hidden;}

容器是#vipMap，通过添加 .map 类可以确保 svg 保持与容器相同的宽度和高度

于 2015-03-26T00:14:42.130 回答