Question

好的，所以这就是事情。我在过去的几天里试图解决这个问题，但我无法得到正确的解决方案！如果有人可以提供帮助，那将是一个巨大的帮助！

问题是 -

我最近开始研究 geomap ，我能够使用纬度和经度（如图here所示）在世界地图上绘制标记。但在那之后，我无法做到以下事情 -

将特定值的标记的颜色分组。
点击标记时添加任何事件（我提到谷歌网站和SO问题）

我已经看到许多不同的SO问题但没有一个能帮助我找到解决方案！

以下是 index.html -

    <html>
    <head>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type='text/javascript' src='http://www.gstatic.com/charts/loader.js'></script>
      <script type='text/javascript'>
       google.charts.load('current', {'packages': ['geomap']});
       google.charts.setOnLoadCallback(drawMap);

        function drawMap() {

         var data = google.visualization.arrayToDataTable([
            ['Latitude', 'Longitude','Value','Location'],
            [23.0225, 72.5714, 10, 'Ahmedabad'],
            [41.8781, -87.6298, 8, 'Chicago'],
            [41.3851, 2.1734, 6, 'Barcelona'],
            [7.9465, -1.0232, 7, 'Ghana'],
            [22.5726, 88.3639, 3, 'Kolkata'],
            [16.4314, 103.5059, 1, 'Kalasin Province'],
            [25.930414, 50.637772, 2, 'Bahrain'],
            [-25.274398, 133.775136, 6, 'Australia'],
            [56.130366, -106.346771, 6, 'Canada'],
            [-35.675147, -71.542969, 9, 'Chile'],
            [51.165691, 10.451526, 10, 'Germany'],
            [36.204824, 138.252924, 4, 'Japan']
          ]);

          var options = {
            region: 'world',
            dataMode: 'markers',
            displayMode: 'markers',
            colorAxis: { minValue: 1, maxValue: 10, colors: ['red', 'yellow', 'green']},  // I'm bit confused if here maxValue should be 10 or 3
            sizeAxis: { minValue: 0, maxValue: 3, minSize: 1, maxSize: 4},
            width: 1300,
            height: 600,
            showZoomOut: true,
            enableRegionInteractivity: true,
            magnifyingGlass: {enable: true, zoomFactor: 7.5}, 
            zoomOutLabel: 'zoomOut'
          };

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

    // select event   

           google.visualization.events.addListener(geomap, 'select', regionClick );

    // another event
          google.visualization.events.addListener(geomap, 'showzoomout', zoomOut);
          function zoomOut (e){
              alert('a random alert');
          }  

          geomap.draw(data, options);
        };

// I had initially placed below function code inside drawMap(), as told in a SO  question, but that too didn't help
        function regionClick() {
            alert('random alert');
            var selection = geomap.getSelection();
            var message = '';
            for (var i=0; i<selection.length; i++) {
                var item = selection[i];
                if (item.row != null && item.column != null) {
                    var str = data.getFormattedValue(item.row, item.column);
                    message += '{ row:' + item.row + ', column:' + item.column + '} = ' + str + '\n';
                }
                else if (item.row != null) {
                    var str = data.getFormattedValue(item.row , 0);
                    message += '{ row:' + item.row + ', column: null }; value = ' + str + '\n';
                }
                else if (item.column != null) {
                    var str = data.getFormattedValue(0 , item.column);
                    message += '{ row: null, column: ' + item.column + ' }; value = ' + str + '\n';
                }
            }
            if (message == '') {
                message = 'nothing';
            }
            alert('You selected: ' + message);
          }
      </script>
    </head>

    <body>
        <div id='map_canvas'></div>
    </body>

    </html>

请，任何形式的帮助都将受到高度赞赏！

Answer 1

要添加活动，请使用如下经典监听器：

marker.addListener('click', function(){ dosomething()});

对于颜色，请阅读：Google Maps API 3 - Custom marker color for default (dot) marker

使用纬度和经度的geomap标记 - regionClick，并设置标记大小和颜色

1 个答案: