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

});

说明：加载示例，单击国家/地区并刷新浏览器页面。

整个过程都是在客户端完成的，但是 - 只是从你的答案中猜测 - 我相信你可以通过PHP或Laravel从cookie服务器端读取信息没有任何问题。

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

Jquery矢量地图取代了onClick上的cookie

1 个答案: