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

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

转载作者：行者123 更新时间：2023-11-29 19:26:29

我正在尝试为魁北克省 map 中的城市显示城市标记。根据谷歌文档，我们应该能够设置 resolution provinces 的选项并设置 region到 ISO 代码(例如:US-GA..)。当我尝试 CA-QC (找到此代码 here on wikipedia 。

当我尝试这个时， map <div>显示此消息:请求的 map 不存在

参见 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>

我有办法/解决方法吗？

谢谢

最佳答案

这个国家好像不能设置区域

根据 Visualization: Geochart :

'provinces' - Supported only for country regions and US state regions. Not supported for all countries; please test a country to see whether this option is supported.

但您可以考虑另一种选择，使用 circle markers 来吸引人气而不是 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>