JvectorMap getJSON错误

Question

我在将JSON数据显示在地图上时遇到了麻烦，我认为在我的代码上有一组单独的眼睛可以解决这个问题。

控制器

    $map = $this->dispatcher->getParam('map');
    $this->view->setVar("map", $map);

HTML代码

<div id="map<?php echo $map ?>" class="map" style="width: 600px; height: 400px"></div>

map.js

$(function () {
$.getJSON('../js/off-exchange.json', function (data) {
    var val = 2015;
    statesValues = jvm.values.apply({}, jvm.values(data.states));
    $('#mapoff-exchange').vectorMap({
        map: 'us_merc_en',
        backgroundColor: '#ffffff',
        regionStyle: {
            initial: {
                fill: '#87c9b4',
            },
            hover: {
                fill: '#2e8f70',
            },
        },
        onRegionTipShow: function (e, label, code) {
            var arr = data.states[val][code];
            var str = arr.join(",<br> ");
            var trim = str.replace(/^[,<br> ]+|[,<br> ]+$|[,<br> ]+(?=,<br>)/g, "");
            label.html('<b>' + label.html() + '</b>' + '<br> ' + trim);
        },
    });
  });
});

当我拿出$.getJSON代码时，地图显示出来，所以我觉得有一些问题，但是我不能为我的生活搞清楚

Answer 1

您仍然需要定义系列，这在您的代码中不存在。尝试使用此代码显示区域：

$(function () {
$.getJSON('../js/off-exchange.json', function (data) {
    var val = 2015;
    statesValues = jvm.values.apply({}, jvm.values(data.states));
    $('#mapoff-exchange').vectorMap({
        map: 'us_merc_en',
        backgroundColor: '#ffffff',
        regionStyle: {
            initial: {
                fill: '#87c9b4',
            },
            hover: {
                fill: '#2e8f70',
            },
        },
        series: {
            regions: [{
              scale: ['#DEEBF7', '#08519C'],
              attribute: 'fill',
              values: data.states[val]
            }]
        },
        onRegionTipShow: function (e, label, code) {
            var arr = data.states[val][code];
            var str = arr.join(",<br> ");
            var trim = str.replace(/^[,<br> ]+|[,<br> ]+$|[,<br> ]+(?=,<br>)/g, "");
            label.html('<b>' + label.html() + '</b>' + '<br> ' + trim);
        }
    });
  });
});