Question

我今天使用Fusion Tables创建了一张地图，我大约有90％的地方需要，但我完全坚持在我的地图上启用鼠标悬停事件。基本上我希望县名出现在地图上。我从这里获取了示例代码： 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>

Fusion Tables fusiontips mouseover事件无法正常工作

1 个答案: