我需要实现mapbubble使用highmaps。我已经产生使用QGIS的地图自定义GeoJSON的文件。
我提到qazxsw POI的例子，但我没有得到地图上的气泡。即使我没有在这个以外控制台的任何错误：
this
的index.html
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
data.json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Highmap</title>
</head>
<body>
<div id="container" style="height: 500px; min-width: 350px; max-width: 800px; margin: 0 auto;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src='./data/custom-world.js'></script>
<script>
$.getJSON('./data/data.json', function (data) {
Highcharts.mapChart('container', {
chart: {
borderWidth: 1,
map: 'custom/world'
},
title: {
text: 'World population 2013 by country'
},
subtitle: {
text: 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
name: 'Population 2016',
joinBy: ['ISO_A2', 'name'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.deposited}: [BTC]'
}
}]
});
});
</script>
</body>
</html>
定制world.js
请下载从[
{
"name" : "GB",
"deposited" : "5"
},
{
"name" : "RU",
"deposited" : "10"
},
{
"name" : "CH",
"deposited" : "3"
},
{
"name" : "IN",
"deposited" : "50"
}
]
这个文件
现在的问题是，我得到自定义地图，但没有地图气泡。
任何帮助将不胜感激，因为这些highchart /地图是有点混乱，对我来说。
代码看起来完全正常。然而，问题似乎与您here文件。你没有定义的泡沫（z - 属性）的大小。检查文档：data.json。这就是为什么泡沫是不可见的。
例如data.json：
https://api.highcharts.com/highmaps/series.mapbubble.data.z