jquery - jvectormap 中单击事件时自动缩放区域

Question

我有Australia的jvectormap 。单击 map 中的特定州时，它应该缩小同一 map 中的该特定州。有没有办法在不使用多 map 的情况下实现这一点。

Answer 1

是的，当然 - 你的意思是放大？使用 map 对象的 setFocus 方法:

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

编辑:

setFocus 方法记录如下:jVectorMap API Documentation - Map

这是 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 值(以像素为单位的 map 坐标)将被忽略。此外:同样，如果您提供一个区域代码或一组区域代码、纬度和经度以及 x 和 y 值，它们都将被忽略。

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

示例:

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

要获得漂亮且平滑的效果，您应该使用 scale 参数，这是因为用户可以放大 map ，然后单击某个区域，然后，由于这个原因，该区域的缩放效果不会如期望的那么明显。或其他任何东西，也取决于您的初始缩放级别。

因此，您可以研究用户界面，规划用户交互，并使用缩放选项进行一些测试以获得所需的效果(抱歉，我无法进一步提供帮助，因为您没有提供任何源代码)。

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

// 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);