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

问题描述 投票:3回答:2

我有Australia的jvectormap。单击地图中的特定州时,应将其缩小到同一地图中。有没有不用多重地图就能实现的方法。

jquery jvectormap
2个回答
4
投票

是,当然-您是指放大?使用地图对象的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值(以像素为单位的地图坐标)将被忽略。此外:类似地,如果您提供地区代码或地区代码的[[set,纬度和经度以及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);


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/[email protected]/jquery-jvectormap.min.css" type="text/css">
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>
© www.soinside.com 2019 - 2024. All rights reserved.