У меня возникли проблемы с отображением данных 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);
}
});
});
});
Других решений пока нет …