jquery - 在jvectormap中的单击事件上自动缩放区域

我有Australia的jvectormap。单击地图中的特定状态时，应在同一地图中缩小该特定状态。有什么方法可以实现而不使用多地图。

最佳答案

是的，当然-您是说放大？使用地图对象的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值（以像素为单位的地图坐标）将被忽略。
此外：类似地，如果您提供一个地区代码或一组地区代码，纬度和经度以及x和y值，它们将全部被忽略。

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

例：

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

为了获得良好而流畅的效果，您应该使用scale参数，这是因为用户可以放大地图，然后单击某个区域，然后，由于这个原因，对该区域的缩放效果将是不太理想。或其他任何方式，也取决于您的初始缩放级别。

因此，您可以研究用户界面，计划用户交互，并使用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);