首页 > 解决方案 > 是否可以在 GeoChart 中突出显示美国的某些州和加拿大的某些州?

问题描述

区域 1

区域 2

我正在尝试在位置页面上添加地图,并且当用户将鼠标悬停在地图的特定部分时,我想在不同地区选择美国和加拿大的一些州。基本上是北美和南美(巴西和阿根廷)不同地区的地图。

在下面的代码中,我试图突出显示 2 个美国州和 1 个加拿大州。但是当我尝试突出显示大陆上的州时,出现“请求的地图不存在”错误。

<html>

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {
        'packages': ['geochart'],
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    });
    google.charts.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
            ['State', 'Offices'],
            ['New Jersey', 2],
            ['Alabama', 3],
            ['Toronto', 1]
        ]);

        var options = {
            region: '019', // Americas Continent
            colorAxis: {
                colors: ['#00853f', 'black', '#e31b23']
            },
            backgroundColor: '#81d4fa',
            datalessRegionColor: 'gray',
            defaultColor: '#f5f5f5',
            resolution: 'provinces'

        };

        var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
    };
    </script>
</head>
    
<body>
    <div id="geochart-colors" style="width: 100%; height: 100%;"></div>
</body>
    
    </html>

有可能这样做吗?我怎样才能实现像所附图像一样的东西?

我非常感谢您的时间和帮助。谢谢!

标签: google-visualization

解决方案


推荐阅读