高位图中 lat/long 个地图点的点击事件
On Click event on lat/long map point in highmaps
我正在使用 highmaps,但无法在 lat/long 地图上的 mappoint 上获取点击事件。
是否有任何 API 参考资料可以在地图点上应用 onclick 事件?
代码
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'Highmaps basic lat/lon demo'
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
},
series: [{
// Use the gb-all map with no data as a basemap
mapData: Highcharts.maps['countries/gb/gb-all'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/gb/gb-all'], 'mapline'),
color: '#707070',
showInLegend: false,
enableMouseTracking: false
}, {
// Specify points using lat/lon
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: [{
name: 'London',
lat: 51.507222,
lon: -0.1275
}, {
name: 'Birmingham',
lat: 52.483056,
lon: -1.893611
}, {
name: 'Leeds',
lat: 53.799722,
lon: -1.549167
}, {
name: 'Glasgow',
lat: 55.858,
lon: -4.259
}, {
name: 'Sheffield',
lat: 53.383611,
lon: -1.466944
}, {
name: 'Liverpool',
lat: 53.4,
lon: -3
}, {
name: 'Bristol',
lat: 51.45,
lon: -2.583333
}, {
name: 'Belfast',
lat: 54.597,
lon: -5.93
}, {
name: 'Lerwick',
lat: 60.155,
lon: -1.145,
dataLabels: {
align: 'left',
x: 5,
verticalAlign: 'middle'
}
}]
以上是来自 highmaps 的示例,但我没有得到任何 API 参考来实现 lat/long 地图点上的点击事件。
谢谢
检查引用 plotOptions.series.point.events.click
plotOptions: {
series: {
point: {
events: {
click: function() {
var text = '<b>Clicked point</b><br>Series: ' + this.series.name +
'<br>Point: ' + this.name + ' (lat: ' + this.lat + ' lon:' + this.lon + ')',
chart = this.series.chart;
if (!chart.clickLabel) {
chart.clickLabel = chart.renderer.label(text, 0, 250)
.css({
width: '180px'
})
.add();
} else {
chart.clickLabel.attr({
text: text
});
}
}
}
}
}
},
Fiddle 演示
我正在使用 highmaps,但无法在 lat/long 地图上的 mappoint 上获取点击事件。
是否有任何 API 参考资料可以在地图点上应用 onclick 事件?
代码
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'Highmaps basic lat/lon demo'
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
},
series: [{
// Use the gb-all map with no data as a basemap
mapData: Highcharts.maps['countries/gb/gb-all'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/gb/gb-all'], 'mapline'),
color: '#707070',
showInLegend: false,
enableMouseTracking: false
}, {
// Specify points using lat/lon
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: [{
name: 'London',
lat: 51.507222,
lon: -0.1275
}, {
name: 'Birmingham',
lat: 52.483056,
lon: -1.893611
}, {
name: 'Leeds',
lat: 53.799722,
lon: -1.549167
}, {
name: 'Glasgow',
lat: 55.858,
lon: -4.259
}, {
name: 'Sheffield',
lat: 53.383611,
lon: -1.466944
}, {
name: 'Liverpool',
lat: 53.4,
lon: -3
}, {
name: 'Bristol',
lat: 51.45,
lon: -2.583333
}, {
name: 'Belfast',
lat: 54.597,
lon: -5.93
}, {
name: 'Lerwick',
lat: 60.155,
lon: -1.145,
dataLabels: {
align: 'left',
x: 5,
verticalAlign: 'middle'
}
}]
以上是来自 highmaps 的示例,但我没有得到任何 API 参考来实现 lat/long 地图点上的点击事件。
谢谢
检查引用 plotOptions.series.point.events.click
plotOptions: {
series: {
point: {
events: {
click: function() {
var text = '<b>Clicked point</b><br>Series: ' + this.series.name +
'<br>Point: ' + this.name + ' (lat: ' + this.lat + ' lon:' + this.lon + ')',
chart = this.series.chart;
if (!chart.clickLabel) {
chart.clickLabel = chart.renderer.label(text, 0, 250)
.css({
width: '180px'
})
.add();
} else {
chart.clickLabel.attr({
text: text
});
}
}
}
}
}
},
Fiddle 演示