沒有發射

Question

下面谷歌可視化地圖選擇事件是畫我的地圖代碼：

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.... 
     } 
    } 

然而，當我點擊我的地圖指針，則不會引發該事件，我的功能不會被調用。我在這裏錯過了什麼？

Answer 1

嘗試在繪製地圖之前設置事件偵聽器。

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>