jvectormap中的点击事件如何自动缩放地图区域？

Question

jvectormap中的点击事件如何自动缩放地图区域？

jqueryjvectormap

5

我有一个关于澳大利亚的jvectormap。在地图上点击某个特定州时，它应该放大该特定州，并显示在同一张地图上。是否有不使用多地图的方法来实现这一点。

- Aravind

1

刚刚扩展了我的回答... - deblocker

谢谢 :) 这非常有帮助.. :) - Aravind

3个回答

0

我发现FocusOn{scale - 很好地框定了你的选择。你可以使用这个命令向前或向后步进。

$(function(){
          // var $ = jQuery;
          $('#EUmap').vectorMap({
            map: 'europe_en',
            panOnDrag: true,
            focusOn: {
              x: 0.5,
              y: 0.5,
              scale: 1.5,
              animate: true
            },
            series: {
              regions: [{
                scale: ['#C8EEFF', '#0071A4'],
                normalizeFunction: 'polynomial',
                values: {
                  "BR": 2023.53,
                  "CZ": 195.23,
                  "DM": 0.38,
                  "FR": 2555.44,
                  "DE": 3305.9,
                  "GR": 305.01,
                  "HU": 132.28,
                  "IT": 2036.69
                }
              }]
            }
          });
        })

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <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://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/continents/jquery.vmap.europe.js"></script>
</head>

<body>
  <div id="EUmap" style="width: 600px; height: 400px"></div>
</body>

</html>

- Edward

0

您可以使用生成对象属性focusOn，并设置值（国家代码），例如：

focusOn: "UA",

这是用于初始缩放的工作，对于任何缩放，请使用setFocus方法。

有关缩放和其他内容的文档：https://jvectormap.com/documentation/javascript-api/jvm-map/

- antipups

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- deblocker · Accepted Answer

当然可以 - 你是指放大吗？使用地图对象的setFocus方法：

  onRegionClick: function(e,  code,  isSelected,  selectedRegions){
    $('#map').vectorMap('get','mapObject').setFocus({region: code});
  }

编辑:

setFocus方法文档在这里: jVectorMap API文档 - 地图

以下是setFocus的内容摘要(感谢Kirill Lebedev, jVectorMap的伟大作者):

  /**
   * setFocus set the map's viewport to the specific point and set zoom of the map 
      to the specific level. Point and zoom level could be defined 
      in two ways: using the code of some region to focus on or a central point
      and zoom level as numbers.
   * @param This method takes a configuration object as the single argument. 
     The options passed to it are the following:
   *   @param {Array} params.regions Array of region codes to zoom to.
   *   @param {String} params.region Region code to zoom to.
   *   @param {Number} params.scale Map scale to set.
   *   @param {Number} params.lat Latitude to set viewport to.
   *   @param {Number} params.lng Longitude to set viewport to.
   *   @param {Number} params.x Number from 0 to 1 specifying the horizontal 
        coordinate of the central point of the viewport.
   *   @param {Number} params.y Number from 0 to 1 specifying the vertical 
        coordinate of the central point of the viewport.
   *   @param {Boolean} params.animate Indicates whether or not to animate 
        the scale change and transition.
   */

一些选项是互斥的，例如如果您提供了纬度和经度，显然x和y值（像素中的地图坐标）将被忽略。此外：类似地，如果您提供区域代码或一组区域代码、纬度和经度以及x和y值，它们都将被忽略。

为了获得动画效果，您应该向参数对象提供选项animate: true。

示例：

$('#map').vectorMap('get','mapObject').setFocus({region: code, animate: true});

为了达到一个好的、流畅的效果，你应该调整 scale 参数。这是因为用户可能会放大地图，然后点击一个区域，因此，进入该区域的缩放效果可能不如预期那样明显。或者其他原因，这也取决于你的初始缩放级别。

因此，你可以研究用户界面，规划用户交互，并使用比例选项进行一些测试，以获得所需的效果（抱歉，由于你没有提供任何源代码，我无法再提供更多帮助）。

从这里开始，尝试获得你最终想要的动画效果：

// Zoom in to the Eyers Rock:
var zParams = {scale: 5, lat: -25.360790, lng: 131.016800, x: 0.5, y: 0.5, animate: true};
$('#map').vectorMap('get','mapObject').setFocus(zParams);