Jquery Vector Maps 替换 cookie onClick

Question

我在我的应用程序中使用 jQuery Vector Maps v1.5.0。这个想法是显示一个地图，当人们点击一个国家时，一个带有国家名称的应用程序 cookie 被创建。

此刻我创建了以下代码：

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#vmap').vectorMap(
            {
                map: 'world_en',
                onRegionClick: function (element,code,region,event)
                {
                    if (
                        code == "AF" ||
                        code == "AL" ||
                        code == "DZ" ||
                        code == "AO" ||
                        code == "ZW")
                        event.preventDefault();
                    else onClick().replace(Cookie::queue('geo', code,'3600'));
                },
                onRegionOver:function(event, code, region){
                    if (
                        code == "AF" ||
                        code == "AL" ||
                        code == "DZ" ||
                        code == "AO" ||
                        code == "ZW")
                    { document.body.style.cursor ="default";}
                    else
                    { document.body.style.cursor ="pointer"; }
                },
                onRegionOut:function(element, code, region){
                    document.body.style.cursor ="default";
                }
            });
    });
</script>

其中 onClick().replace(Cookie::queue('geo', code,'3600')); 必须创建 cookie，如果实际代码 != 带有点击的国家/地区。

目前我不能让它以这种方式工作。未创建 cookie。感谢您的帮助，我是 javascript.

的新手

Answer 1

您将在下面找到一个工作演示。首先，请注意所有代码都应小写。此外，我相信没有必要在所有地图事件中捕获不需要的区域代码，因为我们可以简单地禁用这些用户交互，并直接为 SVG 形状设置灰色样式。

这是整个脚本：

$(document).ready(function() {

  var worldMap,
      excludeCountries = ["af", "al", "dz", "ao", "zw"],
      disabledColor = "#aaaaaa",
      cookieName = "geo";

  function setCookie(name, value, minutes) {
    var date = new Date(),
        time = date.getTime();
    date.setTime(time + minutes * 60 * 1000);
    var expiration = date.toGMTString();
    document.cookie = name + "=" + value + "; expires=" + expiration + "; path=/";
  }

  function getCookie(name) {
    var tokens = document.cookie.split(';'),
        key = name + "=";
    for (var i = 0, l = tokens.length; i < l; i++) {
      var token = tokens[i].trim();
      if (~token.indexOf(key)) {
        return token.substring(key.length);
      }
    }
    return null;
  }

  function getCountryName(code) {
    var path = JQVMap.maps["world_en"].paths[code];
    return path && path.name;
  }
  var fromCountryCode = getCookie(cookieName) || "";
  worldMap = jQuery('#vmap').vectorMap({
    map: "world_en",
    backgroundColor: "#f0f8ff",
    borderColor: '#000000',
    borderOpacity: 0.9,
    color: "#88ee87",
    hoverOpacity: 0.8,
    selectedColor: "#aa0000",
    selectedRegions: [fromCountryCode],
    enableZoom: true,
    showTooltip: true,
    onRegionClick: function(e, code, name) {
      $("#message").text("Your Country: " + name);
      setCookie(cookieName, code, 60); // minutes
    }
  });

  $.each(excludeCountries, function(i, code) {
    var path = worldMap.countries[code];
    if (worldMap.canvas.mode === "svg") {
      path.setAttribute("fill", disabledColor)
      path.setAttribute("original", disabledColor);
      path.setAttribute("class", "disabled-country");
      path.onclick = path.onmouseover = function(e) {
        e.stopImmediatePropagation();
      };
    } else {
      // no support for ltie11  https://github.com/manifestinteractive/jqvmap/issues/183
    }
  });

  var fromCountryName = getCountryName(worldMap.selectedRegions[0]),
      msg = fromCountryName ? "Welcome back from " + fromCountryName : "Please choose your Country";
  $("#message").text(msg);

});

说明：加载示例，点击一个国家并刷新浏览器页面。

整个事情都是在客户端完成的，但是 - 只是从你的答案中猜测 - 我相信你不会有任何问题从你的 cookie 服务器端读取信息，通过使用 PHP 或 Laravel，例如。

笨蛋：https://plnkr.co/edit/SvgjWTtoqmKjDYwKfg6u?p=preview

Jquery Vector Maps 替换 cookie onClick

Jquery Vector Maps replace cookie onClick

jquery

onclick

jvectormap

jqvmap