JQVMap點擊功能

這是一個非常簡單的問題，我不是網絡專業人員。我需要創建一個交互式地圖。我正在使用JQVMap。現在我需要點擊區域，它會回調一個狀態的URL。我在網站上給出和給出的例子。但我不知道如何設置與狀態和URL的鏈接。JQVMap點擊功能

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

來源

2012-09-13 Devil' s Dream

你想要做什麼？你想要返回一個字符串的網址？你想讓它自動將你重定向到那個網址嗎？從該URL打開一個iframe？你的網址格式是什麼？它是否像http://www.yoursite.com/stateCode一樣？ – hardba11

我只想自動重定向到與該狀態相對應的URL。感謝您的回覆。您提供的網址未打開。 –

@ColoradoRockie你能否給我一個解決方案？ –

onRegionClick回調包含構建動態URL所需的所有內容。它會返回點擊事件本身，代表您點擊的區域的2位數字代碼以及您點擊的區域的全名。例如，如果您使用的是美國地圖，然後點擊科羅拉多州，您將返回（regionClickEvent，'co'，'Colorado'）

在第一個示例中，我建立了一個動態url，被點擊並重定向到那裏。如果狀態名稱或代碼不會成爲URL的一部分，則可以執行類似於第二個示例的操作，您可以在其中檢查所點擊的區域並相應地處理它。

您需要更新網址以符合您的需求，但希望這可以給您和想法。

* ex.Use該地區的基礎上飛*網址

$('#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"; 
},

無論如何，希望這會有所幫助。

來源

2012-09-26 23:25:31 hardba11

非常感謝你...第二人能正常工作 –

你好@ColoradoRockie你能幫我多一點嗎？我希望鼠標在懸停時從指針變成手，以便用戶知道它是可點擊的。我已經改變了如下的CSS： .jqvmap-region { cursor：hand;光標：指針; } –

我更新了上面的代碼:) – hardba11

JQVMap點擊功能

回答

相關問題