javascript - Google 可视化 map 选择事件未触发

Question

下面是绘制 map 的代码:

options = {
            mapType: 'styledMap',
            zoomLevel: '2',
            showTip: true,

            useMapTypeControl: true,
            maps: {
                // Your custom mapTypeId holding custom map styles.
                styledMap: {
                    name: 'Styled Map', // This name will be displayed in the map type control.
                    styles: [
                      {
                          featureType: 'poi.attraction',
                          stylers: [{ color: '#fce8b2' }]
                      },
                      {
                          featureType: 'road.highway',
                          stylers: [{ hue: '#0277bd' }, { saturation: -50 }]
                      },
                      {
                          featureType: 'road.highway',
                          elementType: 'labels.icon',
                          stylers: [{ hue: '#000' }, { saturation: 100 }, { lightness: 50 }]
                      },
                      {
                          featureType: 'landscape',
                          stylers: [{ hue: '#259b24' }, { saturation: 10 }, { lightness: -22 }]
                      }
                    ]
                }
            }
        };
        var map = new google.visualization.Map(document.getElementById("div1"));
        map.draw(data, options);

// code for handler

google.visualization.events.addListener(map, 'select', LocationsClick);
    function LocationsClick() {

         //  Custom Code....
        }
    }

但是，当我单击 map 中的指针时，事件不会引发，并且我的函数不会被调用。我在这里缺少什么？

Answer 1

在绘制 map 之前尝试设置事件监听器。

google.load('visualization', '1', { 'packages': ['map'] });
google.setOnLoadCallback(drawMap);

function drawMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Population'],
    ['China', 'China: 1,363,800,000'],
    ['India', 'India: 1,242,620,000'],
    ['US', 'US: 317,842,000'],
    ['Indonesia', 'Indonesia: 247,424,598'],
    ['Brazil', 'Brazil: 201,032,714'],
    ['Pakistan', 'Pakistan: 186,134,000'],
    ['Nigeria', 'Nigeria: 173,615,000'],
    ['Bangladesh', 'Bangladesh: 152,518,015'],
    ['Russia', 'Russia: 146,019,512'],
    ['Japan', 'Japan: 127,120,000']
  ]);

  var options = {
    mapType: 'styledMap',
    zoomLevel: '2',
    showTip: true,

    useMapTypeControl: true,
    maps: {
      // Your custom mapTypeId holding custom map styles.
      styledMap: {
        name: 'Styled Map', // This name will be displayed in the map type control.
        styles: [
          {
            featureType: 'poi.attraction',
            stylers: [{ color: '#fce8b2' }]
          },
          {
            featureType: 'road.highway',
            stylers: [{ hue: '#0277bd' }, { saturation: -50 }]
          },
          {
            featureType: 'road.highway',
            elementType: 'labels.icon',
            stylers: [{ hue: '#000' }, { saturation: 100 }, { lightness: 50 }]
          },
          {
            featureType: 'landscape',
            stylers: [{ hue: '#259b24' }, { saturation: 10 }, { lightness: -22 }]
          }
        ]
      }
    }
  };

  var map = new google.visualization.Map(document.getElementById("div1"));

  google.visualization.events.addListener(map, 'select', selectHandler);
  
  map.draw(data, options);

  function selectHandler() {
    document.getElementById("div2").innerHTML = JSON.stringify(map.getSelection());
  }  
};

<script src="https://www.google.com/jsapi"></script>
<div id="div1"></div>
<br/>
<div id="div2"></div>