0

我在我的应用程序中使用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 的新手。

4

1 回答 1

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。

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

于 2018-01-27T00:27:09.347 回答