JQVMap Нажмите функцию

Question

Это очень простой вопрос, и я не профессионал в Интернете. Мне нужно создать интерактивную карту. Я использую JQVMap. Теперь мне нужно щелкнуть область, и она обратится к URL-адресу состояния. Я даю и выполняю функции, приведенные в качестве примера на сайте. Но я не знаю, как настроить связь с государством и URL-адресами.

jQuery(document).ready(function() { 
    jQuery('#vmap').vectorMap({ 
     map: 'usa_en', 
     backgroundColor: '#ffffff', 
     color: '#333333', 
     hoverColor: '#af090f', 
     selectedColor: '#0076a3', 
     enableZoom: true, 
     showTooltip: true, 
     scaleColors: ['#C8EEFF', '#006491'], 
     onRegionClick: function(element, code, region) 
     { 
      var message = 'You clicked "' 
       + region 
       + '" which has the code: ' 
       + code.toUpperCase(); 

      alert(message); 
     } 
    }); 
}); 

Answer 1

Обратный вызов onRegionClick содержит все необходимое для создания динамического URL-адреса. Он возвращает само событие клика, 2-значный код, представляющий область, которую вы нажали, и полное имя региона, на который вы нажали. Например, если вы использовали карту США и нажали на состояние штата Колорадо, вы вернетесь (regionClickEvent, «co», «Colorado»)

В первом примере я построил динамический url из области, который был нажат и перенаправлен туда. Если имя или код состояния не будет частью URL-адреса, вы можете сделать что-то наподобие второго примера, в котором вы проверяете, в каком регионе был нажат, и обработайте его соответствующим образом.

Вам нужно будет уточнить URL-адрес, который будет соответствовать вашим потребностям, но, надеюсь, это дает вам и идею.

* * ex.Use регион для создания URL на лету * *

$('#vmap') 
    .vectorMap({ 
    map: 'usa_en', 
    onRegionClick: function (event, code, region) { 
     window.location.replace("http://geology.com/state-map/" + region.toLowerCase() + ".shtml"); 
    } 
}) 

* * ex.Check область, которая была нажата и перенаправлять на основе некоторых других правил *

$('#vmap') 
    .vectorMap({ 
    map: 'usa_en', 
    onRegionClick: function (event, code, region) { 
     switch (code) { 
     case "co": 
      window.location.replace("http://www.google.com"); 
      break; 
     case "ca": 
      window.location.replace("http://www.yahoo.com"); 
      break; 
     case "tx": 
      window.location.replace("http://www.bing.com"); 
      break; 
      } 
     }, 
    onRegionOver: function (event, code, region) { 
     document.body.style.cursor = "pointer"; 
     }, 
    onRegionOut: function (element, code, region) { 
      document.body.style.cursor = "default"; 
     } 
}) 

на обновленном курсоров вещи ... если вы не хотите делать это на каждом штате, вы можете сделать то же проверку, как мы делаем onRegionClick и проверить код и посмотреть, если это состояние что вы хотите показать, что стили e курсор.
Или, если есть состояние, в котором вы не хотите появляться в качестве кликабельного, вы можете убить событие до того, как оно начнется.

onRegionOver: function (event, code, region) { 
    if (code == "tx") 
      event.preventDefault(); 
    else 
      document.body.style.cursor = "pointer"; 
}, 

В любом случае, надеюсь, это поможет.