如何使用 JS 通过外部点击以不同颜色显示地理地图

Question

我正在尝试使用使用两种配色方案的地理地图。用户将单击页面上的链接，然后使用 js，我将更改地图的颜色并重新绘制它。

我会改变

options['colors'] = [0xbaecc7, 0x3bc75f]; // light to dark green

问题是，每次我调用函数重绘时，它似乎都会重新加载地理地图。我有两个功能..下面的一个是绿色的，另一个是绘制蓝色地图的。 首先，我通过调用 setOnLoadCallBack 使用 drawMap 绘制蓝色地图

google.setOnLoadCallback(drawMap);

任何帮助或想法将不胜感激！

function drawGoalsMap() {
            var options = {};
            options['dataMode'] = 'regions';
            options['region'] = 'world';
            options['colors'] = [0xbaecc7, 0x3bc75f]; // light to dark green
            options['width'] = '900px'; 
            options['height'] = '400px';

            var data = new google.visualization.DataTable();
            data.addRows(6);
            data.addColumn('string', 'Country');
            data.addColumn('number', 'Messages');
            data.setValue(0, 0, 'Germany');
            data.setValue(0, 1, 200);
            data.setValue(1, 0, 'United States');
            data.setValue(1, 1, 300);
            data.setValue(2, 0, 'Brazil');
            data.setValue(2, 1, 400);
            data.setValue(3, 0, 'Canada');
            data.setValue(3, 1, 500);
            data.setValue(4, 0, 'France');
            data.setValue(4, 1, 600);
            data.setValue(5, 0, 'RU');
            data.setValue(5, 1, 700);

            var container = document.getElementById('map_canvas');
            var geomap = new google.visualization.GeoMap(container);
            geomap.draw(data, options);

            google.visualization.events.addListener(geomap, 'regionClick', 
                function(e) {
                                var countryCode = e['region'];
                                DrillDown(countryCode);
                            }
            );

        };

Answer 1

在偶然编辑我的代码后，我发现了问题！

我正在使用链接 Goals

我将其更改为排除 href=""

<a onclick="drawGoalsMap()">Goals</a>