Tengo el jvectormap de Australia . Al hacer clic en un estado en particular en el mapa, debe alejar ese estado en particular en el mismo mapa. ¿Hay alguna forma de lograr esto sin usar mapas múltiples?
Sí, por supuesto, ¿te refieres a acercar? Utilice el método setFocus del objeto de mapa:
onRegionClick: function(e, code, isSelected, selectedRegions){ $('#map').vectorMap('get','mapObject').setFocus({region: code}); }EDITAR:
El método setFocus está documentado aquí: jVectorMap API Documentation - Map
Este es un extracto de setFocus (créditos: Kirill Lebedev , el gran autor de 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. */Algunas de las opciones son mutuamente excluyentes, por ejemplo, si proporciona Latitud y Longitud, obviamente se ignorarán los valores x e y (coordenadas del mapa en píxeles). Además: de manera similar, si proporciona un código de región o un conjunto de códigos de región, Latitud y Longitud, así como valores x e y, todos serán ignorados.
Para obtener el efecto de animación, debe proporcionar la opción animate: true al objeto de parámetro.
Ejemplo:
$('#map').vectorMap('get','mapObject').setFocus({region: code, animate: true}); Para obtener un efecto agradable y suave, debe jugar con el parámetro de scale , esto porque un usuario podría hacer zoom en el mapa, luego hacer clic en una región y luego, por esta razón, el efecto de zoom en la región no sería tan notable como se desee. o cualquier otra cosa, también dependiendo de su nivel de zoom inicial.
Por lo tanto, puede estudiar la interfaz de usuario, planificar la interacción del usuario y hacer algunas pruebas con la opción de escala para obtener el efecto deseado (lo siento, no puedo ayudarlo más, ya que no ha proporcionado ningún código fuente).
Comience desde aquí e intente obtener el efecto de animación final deseado:
// 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);Encuentro que FocusOn{scale - hace un buen trabajo al enmarcar su selección. Puede avanzar o retroceder como desee con este comando.
$(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>Puede usar en generar atributo de objeto focusOn con valor (código de país), ejemplo:
focusOn: "UA", Funciona para el zoom inicial, para cualquier método de uso de zoom setFocus .
Documento sobre zoom y otros: https://jvectormap.com/documentation/javascript-api/jvm-map/