Google Geochart-无法将地区设置为特定省份
[英]Google Geochart - Unable to set region to a specific province
问题描述
I'm trying to display City markers for cities within the Province of Quebec Map. 
我正在尝试显示魁北克省地图内城市的城市标记。 Based on google documentation, we should be able to set the resolution option to provinces and set the region to the ISO code (Eg: US-GA..). 根据google文档，我们应该能够将resolution选项设置为provinces ，并将region设置为ISO代码（例如：US-GA ..）。 When i try with CA-QC (Found this code here on wikipedia . 当我尝试使用CA-QC （ 在Wikipedia上找到此代码。
When I try this, the map <div> displays this message : Requested map doest not exist 当我尝试此操作时，地图<div>显示以下消息： 请求的地图不存在
See Fiddle: 参见小提琴：
google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['City', 'Popularity'], ['Quebec', 200], ['Montreal', 300], ['Sorel-Tracy', 400], ['Boucherville', 500] ]); var options = { enableRegionInteractivity: 'true',resolution: 'provinces', region:'CA-QC'}; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div>
I there a way/workaround to do this? 我有办法解决此问题吗？
Thanks 谢谢
2 个解决方案
解决方案1
4 已采纳 2015-05-29 11:21:42
It does not seem possible to set regions in this country. 在这个国家/地区似乎无法设置地区。
According to Visualization: Geochart : 根据可视化：Geochart ：
'provinces' - Supported only for country regions and US state regions.
But you could consider another option, draw popularity using circle markers instead of geocharts as demonstrated below: 但是您可以考虑另一种选择，使用圆形标记而不是geocharts来吸引人气，如下所示：
function initialize() { var mapOptions = { zoom: 6, center: new google.maps.LatLng(46.579246, -72.024826) }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); displayPopularity(map); } function displayPopularity(map) { var citymap = {}; citymap['Quebec'] = { center: new google.maps.LatLng(46.769492, -71.290357), population: 200 }; citymap['Montreal'] = { center: new google.maps.LatLng(45.510845, -73.567888), population: 300 }; citymap['Sorel-Tracy'] = { center: new google.maps.LatLng(46.421575, -73.118540), population: 400 }; citymap['Boucherville'] = { center: new google.maps.LatLng(45.601591, -73.438919), population: 500 }; for (var city in citymap) { var populationOptions = { strokeColor: '#00FF00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#00FF00', fillOpacity: 0.35, map: map, center: citymap[city].center, radius: Math.sqrt(citymap[city].population) * 1000 }; var cityCircle = new google.maps.Circle(populationOptions); (function (cityCircle,city) { //create info window var infoWindow = new google.maps.InfoWindow({ content: city }); google.maps.event.addListener(cityCircle, 'click', function(ev) { infoWindow.setPosition(cityCircle.getCenter()); infoWindow.open(map); }); })(cityCircle,city); } } google.maps.event.addDomListener(window, 'load', initialize);
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Popularity map</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> </head> <body> <div id="map-canvas"></div> </body> </html>
解决方案2
-1 2015-05-28 16:45:31
将地区更改为region:'CA'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.