jVectorMap - 设置焦点错误 - jQuery

Question

我知道从zip文件中提取的压缩文件只是基本代码，不包括库。因此我运行了build.sh文件并生成了另一个压缩文件，我已经将其包含在我的脚本中。

期望：

我正在尝试在单击标记时放大标记。 我有一个在事件onMarkerClick上运行的函数。

问题：

我查看了（2）篇不同的帖子：

• Jvector map, how to focus on a marker?

• https://github.com/bjornd/jvectormap/issues/157

这两篇帖子产生了完全相同的错误。

错误：

Error: <g> attribute transform: Expected number, "scale(NaN) translate(N…". jquery.jvectormap.min.js:733

第733行 - this.rootElement.node.setAttribute('transform', 'scale('+scale+') translate('+transX+', '+transY+')');

显然，+scale+不是数字（NaN）

- Rob Scott

---

嗨，Rob；你能提供一个fiddle以便重现你的问题吗？ - Hackerman

Answer 1

我遇到了很多错误，但最终找到了问题所在。一开始我以为c有markers[c].latitude和markers[c].longitude，但实际上并没有。接下来的错误是没有将配置传递给setFocus函数。

        onMarkerClick: function (e, c) {
             setFocusLatLng(5, markers[c].latLng[0], markers[c].latLng[1]);
        }

// sets focus on marker clicked
function setFocusLatLng(scale, lat, lng) {
    var mapObj = $('#map').vectorMap('get', 'mapObject');

    var config = {
        animate: true,
        lat: lat,
        lng: lng,
        scale: scale
    }

    mapObj.setFocus(config)
}

---

更新：

如果您需要缩小地图并将焦点设置在地图中心，请执行以下操作：

// sets focus on center of map and zooms back out to full view
function setFocusMapCenter() {
    var mapObj = $('#map').vectorMap('get', 'mapObject'),
        center = mapObj.pointToLatLng(mapObj.width / 2, mapObj.height / 2);

    var config = {
        animate: true,
        lat: center.lat,
        lng: center.lng,
        scale: 1
    }

    mapObj.setFocus(config)
}

- Rob Scott

Answer 2

今天我一直在解决这个问题，我会把我的修复方法留在这里，以防能帮到别人。

当我尝试像这样传递id时，我遇到了相同的错误：

$('#world-map').vectorMap('get', 'mapObject');
map.setFocus(regionId)

但是您必须按照下面的写法传递一个对象，它就可以完美地工作。虽然文档有说明，但不够清晰，加上一个示例就更好了。

$('#world-map').vectorMap('get', 'mapObject');
map.setFocus({region: regionId})

- Maximiliano Najle

Answer 3

虽然我来晚了，但我自己也遇到了这个问题，这些解决方案并不是最好的。我正在使用jquery-3.5.1.js和jvectormap multimap，它似乎工作得很好，除非更改视口的大小，否则会出现此问题。

问题出在文件svg-canvas-element.js中的函数jvm.SVGCanvasElement.prototype.applyTransformParams中。

解决方案是在setAttribute行上包装一个对比scale变量值的数字检查。

e.g.)

if($.isNumeric( scale )){
  this.rootElement.node.setAttribute('transform', 'scale('+scale+') translate('+transX+', '+transY+')');
}

进行更改，保存后，通过打开drill-down.html示例进行测试。初始地图是美国。选择一个区域加载州地图。现在打开开发者工具（我在Chrome中执行此操作），然后单击地图上的返回按钮（而不是浏览器中的返回按钮）。现在单击另一个州，它应该在控制台中抛出错误，并且如果仍然存在问题，则新州甚至可能不会出现在#map1 div中。如果已修复，则一切都将按预期工作。

- Drew Borell