Google Geochart - 无法将区域设置为特定省份

时间:2015-05-27 19:59:35

标签: javascript google-maps google-visualization

我试图在魁北克省地图内显示城市标记。 根据Google文档,我们应该能够将resolution选项设置为provinces,并将region设置为ISO代码(例如:US-GA ..)。当我尝试CA-QC时(找到此代码here on wikipedia

当我尝试此操作时,地图<div>会显示以下消息:请求的地图不存在

见小提琴:

&#13;
&#13;
      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);
      }
&#13;
<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>
   
&#13;
&#13;
&#13;

我有办法/解决方法吗?

由于

2 个答案:

答案 0 :(得分:4)

似乎无法在此国家/地区设置区域。

根据Visualization: Geochart

  

&#39;省&#39; - 仅支持国家/地区和美国州。   并非所有国家都支持;请测试一个国家是否   支持此选项。

但您可以考虑使用其他选项,使用circle markers代替geocharts绘制广告,如下所示:

&#13;
&#13;
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);
&#13;
<!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>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

将区域更改为region:'CA'