Question

当我将焦点设置到特定区域时，地图放大太多，我想使其更宽。这是代码：

var mapObj = $("#vmap").vectorMap("get", "mapObject");
mapObj.setFocus({ region: code, animate: true });

其中的代码是一个国家的代码，例如“ AF”，“ UK”，“ IT”等...

我已经尝试过类似的方法，但是它被完全忽略了：

mapObj.setFocus({ region: code, animate: true, scale: 1.9 });

缩放到某个区域时是否可以设置其他缩放级别？

Answer 1

是的，因为您要提供 region 代码，所以它将被忽略。当您在缩放选项内提供一个或多个 region 代码时，库将根据该区域的边界框自动计算缩放系数。），以便此边界框完全适合地图容器内。

如果您需要设置自定义缩放比例，恕我直言，最简单的方法是指定 lat / lng 对，即类似这样的内容：

var zoomSettings = {scale: 3, lat: 41.915720, lng: 12.438120, animate: true};
mapObj.setFocus(zoomSettings);

或者，如果您没有要缩放的点，并且需要缩放到区域，则可以获取该 region 的边界框的中心并使用该 center-point 作为您的缩放至点：

var regionBBox = mapObj.regions[code].element.shape.getBBox();
var normalizedRegionCX = (regionBBox.x + regionBBox.width / 2) / mapObj.defaultWidth;
var normalizedRegionCY = (regionBBox.y + regionBBox.height / 2) / mapObj.defaultHeight;
mapObj.setFocus({x: normalizedRegionCX, y: normalizedRegionCY, scale: 1.9, animate: true});

这是演示：

$(document).ready(function () {
  function listRegionNames(map) {
     var options = "";
    $.each(jvm.Map.maps[map].paths, function(index, value) {
      options += '<option value="' + index + '">' + value.name + '</option>';
    });
    $("#regions").html(options).change(function() {
      var mapObj = $("#map").vectorMap("get", "mapObject");
      mapObj.clearSelectedRegions();
      mapObj.setSelectedRegions(this.value);
      mapObj.setFocus({scale: 1, x: 0.5, y: 0.5, animate: false});
      customZoomToRegion(mapObj, this.value, 0.01 * $("#factor").val());
    });
  }
  function customZoomToRegion(map, code, factor) {
    var bBox = map.regions[code].element.shape.getBBox();
    var normRCX = (bBox.x + 0.5 * bBox.width)/map.defaultWidth;
    var normRCY = (bBox.y + 0.5 * bBox.height)/map.defaultHeight;
    var scale = Math.min(map.defaultWidth/bBox.width, map.defaultHeight/bBox.height);
    map.setFocus({x: normRCX, y: normRCY, scale: scale * factor, animate: true});
  }
  var map = "world_mill_en";
  listRegionNames(map);
  $("#map").vectorMap({
    map: map,
    zoomMax: 100,
    regionsSelectable: true,
    onRegionClick: function(e,  code,  isSelected,  selectedRegions){
      var mapObj = $("#"+e.target.parentElement.id).vectorMap("get", "mapObject");
      mapObj.clearSelectedRegions();
      mapObj.setFocus({scale: 1, x: 0.5, y: 0.5, animate: false});
      customZoomToRegion(mapObj, code, 0.01 * $("#factor").val());
      return true;
    }
  });
});

<html>
<head>
  <title>jVectorMap Labels</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <style>
    .jvectormap-region.jvectormap-element {
      text-shadow: -1px -1px 3px #fff, 1px -1px 3px #fff, -1px 1px 3px #fff, 1px 1px 3px #fff;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
  Zoom to: <select id="regions"></select>
  Factor: 0.2<input id="factor" type="range" min="20" max="100" value="50">1.0
  <hr>
  <div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

jVectorMap缩放或缩放setFocus上的地图到区域代码

1 个答案: