Fusion Tables fusiontips mouseover event not working

Question

我今天創建了一個使用Fusion Tables的地圖，我約需要的90％，但我完全停留在啓用地圖上的mouseover事件。基本上我想讓縣名在地圖上懸停。我從這裏拿到了示例代碼： http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/examples.html

我想我已經正確填寫了所需的信息。我從Fusion Tables自動生成HTML/JS地圖。這裏是我的實時地圖：http://www.casalett.net/map/map.html

任何和所有幫助，將不勝感激！

下面的代碼：

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;v=3"></script> 
    <script src="js/fusiontipsV1.js" type="text/javascript"></script> 


    <script type="text/javascript"> 
     function initialize() { 
     google.maps.visualRefresh = true; 
     var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || 
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); 
     if (isMobile) { 
      var viewport = document.querySelector("meta[name=viewport]"); 
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no'); 
     } 
     var mapDiv = document.getElementById('googft-mapCanvas'); 
     //mapDiv.style.width = isMobile ? '100%' : '1000px'; 
     //mapDiv.style.height = isMobile ? '100%' : '400px'; 
     var map = new google.maps.Map(mapDiv, { 
      center: new google.maps.LatLng(35.196111, -79.464167), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 

     layer = new google.maps.FusionTablesLayer({ 
      map: map, 
      heatmap: { enabled: false }, 
      query: { 
      select: "col4\x3e\x3e0", 
      from: "1ohK_Kmh7JbNZH1nC7NM-1MjhVf8OBzCJrxmbC0tq", 
      where: "" 
      }, 
      options: { 
      styleId: 2, 
      templateId: 2 
      } 
     }); 

// This is the only section I added myself from the example page 
     layer.enableMapTips({ 
        select: "'County Name'", // list of columns to query, typially need only one column. 
        from: "1ohK_Kmh7JbNZH1nC7NM-1MjhVf8OBzCJrxmbC0tq", // fusion table name 
        geometryColumn: 'gemoetry', // geometry column name 
        suppressMapTips: false, // optional, whether to show map tips. default false 
        delay: 200, // milliseconds mouse pause before send a server query. default 300. 
        tolerance: 8 // tolerance in pixel around mouse. default is 6. 
        }); 
        //listen to events if desired. 
        google.maps.event.addListener(layer, 'mouseover', function(fEvent) { 
        var row = fEvent.row; 
        myHtml = 'mouseover:<br/>'; 
        for (var x in row) { 
         if (row.hasOwnProperty(x)) { 
         myHtml += '<b>' + x + "</b>:" + row[x].value + "<br/>"; 
         } 
        } 
        document.getElementById('info').innerHTML = myHtml; 
        }); 
        google.maps.event.addListener(layer, 'mouseout', function(fevt) { 
        document.getElementById('info').innerHTML = ''; 
        }); 
    // Section I added myself ends here 

     if (isMobile) { 
      var legend = document.getElementById('googft-legend'); 
      var legendOpenButton = document.getElementById('googft-legend-open'); 
      var legendCloseButton = document.getElementById('googft-legend-close'); 
      legend.style.display = 'none'; 
      legendOpenButton.style.display = 'block'; 
      legendCloseButton.style.display = 'block'; 
      legendOpenButton.onclick = function() { 
      legend.style.display = 'block'; 
      legendOpenButton.style.display = 'none'; 
      } 
      legendCloseButton.onclick = function() { 
      legend.style.display = 'none'; 
      legendOpenButton.style.display = 'block'; 
      } 
     } 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

Answer 1

您需要包括你的apiConsoleKey有效的域您的網頁上，像例如在：

http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/examples/fusiontips.html

// authentication required, either API key or OAuth 2.0 token 
 
// replace with a key valid for your domain 
 
var apiConsoleKey = "AIzaSyA47jXARydzK61yX18t4oPpy6xUZDBukiY"; // valid for this question on stackoverflow.com, http://stac 
 
// var apiConsoleKey = "AIzaSyAfravxKsLG5RItI93Dyh3Nya8Dg7vfYsk"; // valid for gmaps-utility-gis.googlecode.com domain only. 
 
// var apiConsoleKey = "AIzaSyCxitB5jQcw7weQdg9MqBRfxr6mj81wT7I"; // valid for geocodezip.com 
 

 
var map, layer; 
 

 
function loadPoint() { 
 
    if (layer != null) { 
 
    layer.setMap(null); 
 
    google.maps.event.clearInstanceListeners(layer); 
 
    } 
 
    // original numeric ID 297050; Fusion Tables API v1.0 requires encrypted IDs. 
 
    var tableid = '15UY2pgiz8sRkq37p2TaJd64U7M_2HDVqHT3Quw'; 
 
    layer = new google.maps.FusionTablesLayer({ 
 
    query: { 
 
     select: 'Address', 
 
     from: tableid 
 
    }, 
 
    map: map 
 
    }); 
 
    layer.enableMapTips({ 
 
    // authentication required, either API key or OAuth 2.0 token 
 
    key: apiConsoleKey, // replace with a key valid for your domain. 
 
    select: "'Store Name','Address'", // list of columns to query, typially need only one column. 
 
    from: tableid, // fusion table name 
 
    geometryColumn: 'Address', // geometry column name 
 
    suppressMapTips: false, // optional, whether to show map tips. default false 
 
    delay: 200, // milliseconds mouse pause before send a server query. default 300. 
 
    tolerance: 8 // tolerance in pixel around mouse. default is 6. 
 
    }); 
 
    map.setCenter(new google.maps.LatLng(37.4, -122.1)); 
 
    map.setZoom(10); 
 
    addListeners(); 
 
    google.maps.event.addListener(layer, 'click', function(me) { 
 
    me.infoWindowHtml = me.infoWindowHtml + "<a href='javascript:void'>Test</a>"; 
 
    }); 
 
} 
 

 
function loadLine() { 
 
    if (layer != null) { 
 
    layer.setMap(null); 
 
    google.maps.event.clearInstanceListeners(layer); 
 
    } 
 
    // original numeric ID 296374; Fusion Tables API v1.0 requires encrypted IDs. 
 
    var tableid = '1xo_sVz4108NNejzUCGp_2nJIoOltKi467LYbHg'; 
 
    layer = new google.maps.FusionTablesLayer({ 
 
    query: { 
 
     select: 'geometry', 
 
     from: tableid 
 
    }, 
 
    map: map 
 
    }); 
 
    layer.enableMapTips({ 
 
    // authentication required, either API key or OAuth 2.0 token 
 
    key: apiConsoleKey, // replace with a key valid for your domain. 
 
    select: "description", // list of columns to query, typially need only one column. 
 
    from: tableid, // fusion table name 
 
    geometryColumn: 'geometry', // geometry column name 
 
    suppressMapTips: false, // optional, whether to show map tips. default false 
 
    delay: 200, // milliseconds mouse pause before send a server query. default 300. 
 
    tolerance: 4 // tolerance in pixel around mouse. default is 6. 
 
    }); 
 
    map.setCenter(new google.maps.LatLng(50.46, -104.6)); 
 
    map.setZoom(12); 
 
    addListeners(); 
 

 
} 
 

 
function loadPoly() { 
 
    if (layer != null) { 
 
    layer.setMap(null); 
 
    google.maps.event.clearInstanceListeners(layer); 
 

 
    } 
 
    // original numeric ID 1670859; Fusion Tables API v1.0 requires encrypted IDs. 
 
    var tableid = '18Vjqv451aikVXxlnGKhVEIJ0y4l18ZQ86eReE68'; 
 
    layer = new google.maps.FusionTablesLayer({ 
 
    query: { 
 
     select: 'geometry_simplified', 
 
     from: tableid 
 
    }, 
 
    map: map 
 
    }); 
 
    layer.enableMapTips({ 
 
    // authentication required, either API key or OAuth 2.0 token 
 
    key: apiConsoleKey, // replace with a key valid for your domain. 
 
    select: "'NAME'", // list of columns to query, typially need only one column. 
 
    from: tableid, // fusion table name 
 
    geometryColumn: 'geometry_simplified', // geometry column name 
 
    suppressMapTips: false, // optional, whether to show map tips. default false 
 
    delay: 100, // milliseconds mouse pause before send a server query. default 300. 
 
    tolerance: 1 // tolerance in pixel around mouse. default is 6. 
 
    }); 
 
    map.setCenter(new google.maps.LatLng(38.3, -95.4)); 
 
    map.setZoom(4); 
 
    addListeners(); 
 

 
} 
 

 
function addListeners() { 
 
    google.maps.event.addListener(layer, 'mouseover', function(fEvent) { 
 
    var row = fEvent.row; 
 
    myHtml = 'mouseover:<br/>'; 
 
    for (var x in row) { 
 
     if (row.hasOwnProperty(x)) { 
 
     myHtml += '<b>' + x + "</b>:" + row[x].value + "<br/>"; 
 
     } 
 
    } 
 
    document.getElementById('info').innerHTML = myHtml; 
 

 
    }); 
 
    google.maps.event.addListener(layer, 'mouseout', function(fevt) { 
 
    document.getElementById('info').innerHTML = ''; 
 

 
    }); 
 
} 
 

 
function initialize() { 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    center: new google.maps.LatLng(37.4, -122.1), 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    loadPoly(); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

body { 
 
    font-family: Arial, sans-serif; 
 
} 
 
body, 
 
html { 
 
    width: 100%; 
 
} 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 100%; 
 
}

<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
<script src="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips.js"></script> 
 
<div> 
 
    Move mouse over a fusion table feature and pause a while (configurable, default &lt; 0.5 sec), a map tip will display. (<a href="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/examples.html">documentation</a>) 
 
</div> 
 
<div id='map_canvas'> 
 
</div> 
 
<div id='info'> 
 
</div>

鱈魚Ë代碼片段使用表，我的鑰匙：

function initialize() { 
 
    google.maps.visualRefresh = true; 
 
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || 
 
     (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); 
 
    if (isMobile) { 
 
     var viewport = document.querySelector("meta[name=viewport]"); 
 
     viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no'); 
 
    } 
 
    var mapDiv = document.getElementById('googft-mapCanvas'); 
 
    //mapDiv.style.width = isMobile ? '100%' : '1000px'; 
 
    //mapDiv.style.height = isMobile ? '100%' : '400px'; 
 
    var map = new google.maps.Map(mapDiv, { 
 
     center: new google.maps.LatLng(35.196111, -79.464167), 
 
     zoom: 8, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 
 

 
    layer = new google.maps.FusionTablesLayer({ 
 
     map: map, 
 
     heatmap: { 
 
     enabled: false 
 
     }, 
 
     query: { 
 
     select: "col4\x3e\x3e0", 
 
     from: "1ohK_Kmh7JbNZH1nC7NM-1MjhVf8OBzCJrxmbC0tq", 
 
     where: "" 
 
     }, 
 
     options: { 
 
     styleId: 2, 
 
     templateId: 2 
 
     } 
 
    }); 
 
    var apiConsoleKey = "AIzaSyA47jXARydzK61yX18t4oPpy6xUZDBukiY"; // valid for this question on stackoverflow.com, http://stacksnippets.net 
 

 

 
    layer.enableMapTips({ 
 
     // authentication required, either API key or OAuth 2.0 token 
 
     key: apiConsoleKey, // replace with a key valid for your domain. 
 
     select: "'County Name'", // list of columns to query, typially need only one column. 
 
     from: "1ohK_Kmh7JbNZH1nC7NM-1MjhVf8OBzCJrxmbC0tq", // fusion table name 
 
     geometryColumn: 'gemoetry', // geometry column name 
 
     suppressMapTips: false, // optional, whether to show map tips. default false 
 
     delay: 200, // milliseconds mouse pause before send a server query. default 300. 
 
     tolerance: 8 // tolerance in pixel around mouse. default is 6. 
 
    }); 
 
    //listen to events if desired. 
 
    google.maps.event.addListener(layer, 'mouseover', function(fEvent) { 
 
     var row = fEvent.row; 
 
     myHtml = 'mouseover:<br/>'; 
 
     for (var x in row) { 
 
     if (row.hasOwnProperty(x)) { 
 
      myHtml += '<b>' + x + "</b>:" + row[x].value + "<br/>"; 
 
     } 
 
     } 
 
     document.getElementById('info').innerHTML = myHtml; 
 
    }); 
 
    google.maps.event.addListener(layer, 'mouseout', function(fevt) { 
 
     document.getElementById('info').innerHTML = ''; 
 
    }); 
 

 
    if (isMobile) { 
 
     var legend = document.getElementById('googft-legend'); 
 
     var legendOpenButton = document.getElementById('googft-legend-open'); 
 
     var legendCloseButton = document.getElementById('googft-legend-close'); 
 
     legend.style.display = 'none'; 
 
     legendOpenButton.style.display = 'block'; 
 
     legendCloseButton.style.display = 'block'; 
 
     legendOpenButton.onclick = function() { 
 
     legend.style.display = 'block'; 
 
     legendOpenButton.style.display = 'none'; 
 
     } 
 
     legendCloseButton.onclick = function() { 
 
     legend.style.display = 'none'; 
 
     legendOpenButton.style.display = 'block'; 
 
     } 
 
    } 
 
    } 
 

 
    google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    font-size: 18px; 
 
} 
 
#googft-mapCanvas { 
 
    min-height: 700px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
@media screen and (max-width: 780px) { 
 
    #googft-mapCanvas { 
 
    min-height: 400px; 
 
    } 
 
} 
 
@media screen and (max-width: 480px) { 
 
    #googft-mapCanvas { 
 
    min-height: 400px; 
 
    } 
 
}

<script src="https://maps.google.com/maps/api/js?sensor=false&v=3"></script> 
 
<script src="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips.js"></script> 
 
<h1 style="text-align: center;">Counties in NC</h1> 
 

 
<div id="googft-mapCanvas"></div> 
 

 
<div style="width: 700px; margin: 100px auto;"> 
 
    <section id="anchor-1"> 
 
    <h3>Alamance County</h3> 
 
    <p><strong>Really good quote</strong> 
 
    </p> 
 
    <p>The default automatic template shows the data from the first 10 columns. Check or uncheck the box next to the column name to include it in the automatic info window.Any format applied to the data in the column will show here. For example, if a column 
 
     contains URLs to images and the format "Four line image" has been applied in the Edit > Change columns dialog, the image will be displayed in both the table and the info window. 
 
    </p> 
 
    </section> 
 

 
    <section id="anchor-2"> 
 
    <h3>Alexander County</h3> 
 
    <p><strong>Really good quote</strong> 
 
    </p> 
 
    <p>The default automatic template shows the data from the first 10 columns. Check or uncheck the box next to the column name to include it in the automatic info window.Any format applied to the data in the column will show here. For example, if a column 
 
     contains URLs to images and the format "Four line image" has been applied in the Edit > Change columns dialog, the image will be displayed in both the table and the info window. 
 
    </p> 
 
    </section> 
 

 
    <section id="anchor-3"> 
 
    <h3>Alleghany County</h3> 
 
    <p><strong>Really good quote</strong> 
 
    </p> 
 
    <p>The default automatic template shows the data from the first 10 columns. Check or uncheck the box next to the column name to include it in the automatic info window.Any format applied to the data in the column will show here. For example, if a column 
 
     contains URLs to images and the format "Four line image" has been applied in the Edit > Change columns dialog, the image will be displayed in both the table and the info window. 
 
    </p> 
 
    </section> 
 

 
    <section id="anchor-4"> 
 
    <h3>Anson County</h3> 
 
    <p><strong>Really good quote</strong> 
 
    </p> 
 
    <p>The default automatic template shows the data from the first 10 columns. Check or uncheck the box next to the column name to include it in the automatic info window.Any format applied to the data in the column will show here. For example, if a column 
 
     contains URLs to images and the format "Four line image" has been applied in the Edit > Change columns dialog, the image will be displayed in both the table and the info window. 
 
    </p> 
 
    </section>