Google visualization 如何在谷歌地图中添加省份标签
我在Angular4中使用谷歌图表 省份图表示例:Google visualization 如何在谷歌地图中添加省份标签,google-visualization,Google Visualization,我在Angular4中使用谷歌图表 省份图表示例: public map_ChartData = [ ['Provinces', 'Popularity'], [{ v: 'NL-DR', f: 'Drenthe' }, 5], [{ v: 'NL-NH', f: 'Noord-Holland' }, 1000], [{ v: 'NL-UT', f: 'Utrecht' }, 800], [{ v:
public map_ChartData = [
['Provinces', 'Popularity'],
[{ v: 'NL-DR', f: 'Drenthe' }, 5],
[{ v: 'NL-NH', f: 'Noord-Holland' }, 1000],
[{ v: 'NL-UT', f: 'Utrecht' }, 800],
[{ v: 'NL-FL', f: 'Flevoland' }, 200],
[{ v: 'NL-FR', f: 'Friesland' }, 350],
[{ v: 'NL-GE', f: 'Gelderland' }, 450],
[{ v: 'NL-GR', f: 'Groningen' }, 788],
[{ v: 'NL-LI', f: 'Limburg' }, 244],
[{ v: 'NL-NB', f: 'Noord-Brabant' }, 750],
[{ v: 'NL-OV', f: 'Overijssel' }, 620],
[{ v: 'NL-ZE', f: 'Zeeland' }, 50],
[{ v: 'NL-ZH', f: 'Zuid-Holland' }, 890]
];
public map_ChartOptions = {
region: 'NL', resolution: 'provinces',
colorAxis: {
minValue: 0,
maxValue: 1000,
colors: ['grey', 'yellow', 'orange', 'blue', 'green']
}};
<div id="map_chart"
(itemSelect)="itemSelected($event)"
(itemDeselect)="itemDeselected($event)"
[chartData]="map_ChartData"
[chartOptions]="map_ChartOptions"
chartType="GeoChart"
GoogleChart></div>
更新2:
我在和include上找不到谷歌地图的API密钥
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
使用选项-->显示模式:“文本”
--将应用标签标签加载速度慢,但确实显示 但是,这也会将颜色移动到标签上,
并删除省份的背景色 请参阅以下工作片段
google.charts.load('current'{
回调:图纸,
软件包:['geochart'],
mapsApiKey:'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
函数绘图图(){
var data=google.visualization.arrayToDataTable([
[‘省份’、‘人气’],
[{v:'NL-DR',f:'Drenthe'},5],
[{v:'NL-NH',f:'Noord Holland'},1000],
[{v:'NL-UT',f:'Utrecht'},800],
[{v:'NL-FL',f:'Flevoland'},200],
[{v:'NL-FR',f:'Friesland'},350],
[{v:'NL-GE',f:'Gelderland'},450],
[{v:'NL-GR',f:'Groningen'},788],
[{v:'NL-LI',f:'Limburg'},244],
[{v:'NL-NB',f:'Noord Brabant'},750],
[{v:'NL-OV',f:'Overijssel'},620],
[{v:'NL-ZE',f:'Zeeland'},50],
[{v:'NL-ZH',f:'Zuid Holland'},890]
]);
变量选项={
显示模式:“文本”,
地区:'NL',
决议:“各省”,
颜色轴:{
最小值:0,
最大值:1000,
颜色:[“灰色”、“黄色”、“橙色”、“蓝色”、“绿色”]
}
};
var chart=new google.visualization.geograpart(document.getElementById('chart');
图表绘制(数据、选项);
};代码>
Ah`显示模式:“文本”确实是答案。我缺少的是一个谷歌地图的API密钥。在我得到它并激活它之后,标签就显示出来了。
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>