jVectorMap

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)

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)
}

Answer 2

我今天已经解决了这个问题，我会把我的修复留在这里，以防我能帮助到别人。

我在尝试集中传递 id 时遇到了同样的错误：

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

但是你必须传递一个对象，如下所示，它工作得很好。文档上说了，但不是很清楚，有一个例子会更好

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

Answer 3

聚会迟到了，但我自己也遇到了这个问题，这些解决方案并不是最好的。我将 jquery-3.5.1.js 与 jvectormap multimap 一起使用，它似乎工作得很好，除非如果视口的大小发生变化

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

解决方案是在 setAttribute 行中用数字检查标度变量的值。

例）

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

进行更改，保存，然后通过打开 drill-down.html 示例进行测试。初始地图是美国。 Select 加载州地图的区域。现在打开开发人员工具（我在 chrome 中执行此操作）然后单击地图上的后退按钮（而不是在浏览器中）。现在点击一个不同的状态它应该在控制台中抛出错误并且新状态甚至可能不会出现在 #map1 div 如果它仍然是坏的。如果它被修复，一切都会按预期工作。

jVectorMap - setFocus 错误 - jQuery

jVectorMap - setFocus error - jQuery

javascript

jquery