JvectorMap getJSON error

本文关键字：error getJSON JvectorMap | 更新日期: 2023-09-27

我在获取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代码时，地图会显示出来，所以我认为这有一些问题，但我一辈子都无法计算出

您仍然需要定义您的系列，这在您的代码中是不存在的。试试这个代码来显示区域：

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