Question

我正在开发一个涉及使用Google地图API创建地图的项目。这是法国及其地区的地图。我创建了一个融合表，你可以看到here。我在我的测试网站上实现了这个地图，但是我有一个问题，我想在区域上创建一个悬停效果，为此我需要将pylygons存储在变量中以使用它：

google.maps.event.addListener(country, 'mouseover', function() {
   this.setOptions({fillOpacity: 1});
});
google.maps.event.addListener(country, 'mouseout', function() {
   this.setOptions({fillOpacity: 0.3});
});

正如本示例代码中的谷歌API文档here所示，您可以这样做，但我不明白如何在此代码中实现我的融合表。据我了解

var query = 'SELECT name, kml_4326 FROM ' +  
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';

其中kml_4326是融合表的名称，1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ是我的表融合ID，但我不明白的是：

url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');

最后var geometries = rows[i][1]['geometries'];其中['geometries']是包含每个区域坐标的colomn，在我的例子中是'几何'。

这是我目前的代码：

<html>
<head>
  <title></title>
  <style>
    #map-canvas{width: 800px; height:600px;}
  </style>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script>
        function initialise() {
          /*Markers coordinates*/
          var center = new google.maps.LatLng(46.9,1.8);
          /*end markers coordinates*/
          //var myLatlng = new google.maps.LatLng(47.456751,-0.488409); // Add the coordinates
          var mapOptions = {
            zoom: 6, // The initial zoom level when your map loads (0-20)
            minZoom: 5, // Minimum zoom level allowed (0-20)
            maxZoom: 8, // Maximum soom level allowed (0-20)
            zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
            zoomControlOptions: {
                style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
            },
            center: center, // Centre the Map to our coordinates variable
            //mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
            scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
            // All of the below are set to true by default, so simply remove if set to true:
            panControl:false, // Set to false to disable
            mapTypeControl:false, // Disable Map/Satellite switch
            scaleControl:false, // Set to false to hide scale
            streetViewControl:false, // Set to disable to hide street view
            overviewMapControl:false, // Set to false to remove overview control
            rotateControl:false // Set to false to disable rotate control
            }
          var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            var infowindow = new google.maps.InfoWindow({disableAutoPan: true});

              var location = {};


          /*hide world*/
              var style = [{
                featureType: 'all',
                elementType: 'all',
                stylers: [
                   { "visibility": "simplified" },
                    { "color": "#f2f2f2" }
                ]
              },];
            var styledMapType = new google.maps.StyledMapType(style, {
                map: map,
                name: 'Styled Map'
            });
            map.mapTypes.set('map-style', styledMapType);
            map.setMapTypeId('map-style');
            /*end hide world*/
              layer_0 = new google.maps.FusionTablesLayer({
                query: {
                    select: "geometry",
                    from: "1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84"
                },
                styles: [{
              polygonOptions: {
                  fillOpacity: '0.7',
              }
            }],
                options : {suppressInfoWindows:true},/*disable info window*/
                clickable:false,/*disable click*/
                map: map,
                styleId: 2,
                templateId: 2,
              });
      //Set event for layer
      google.maps.event.addListener(layer_0, 'mouseover', function(e) {
        console.log('ok');
      });
          google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); // Keeps the Pin Central when resizing the browser on responsive sites
        }
        google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded. 
      </script>

</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

编辑12/01/2014：我在图层上添加了鼠标悬停事件，但它仍无法正常工作

如果有人对这件事有任何见解，我真的会给予任何帮助：）

Answer 1

您应该为图层

设置事件

//Set event for layer
  google.maps.event.addListener(layer_0, 'click', function(e) {
    alert('hello world');
    return false;
  });

Answer 2

FusionTablesLayers不支持mouseover / mouseout事件。您需要使用the example you reference中的代码创建原生Google Maps Javascript API v3多边形，并为其添加mouseover / mouseout标记。

使用您的表格的工作代码段：

＆＃13;

// from http://stackoverflow.com/questions/12534085/hex-to-bgr-hex-conversion-for-kml-color-in-java
function kmlToRgb(kmlColor){
  rr = kmlColor.substr(7, 2);
  gg = kmlColor.substr(5, 2);
  bb = kmlColor.substr(3, 2);
  return "#"+rr+gg+bb;
}
var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00','#00FFFF','#FF00FF',
              '#800000', '#008000', '#000080', '#808000','#008080','#800080',
              '#80FF00', '#0080FF', '#FF0080', '#FF8000','#00FF80','#8000FF'];
var map;
function initialise() {
    /*Markers coordinates*/
    var center = new google.maps.LatLng(46.9, 1.8);
    /*end markers coordinates*/
    //var myLatlng = new google.maps.LatLng(47.456751,-0.488409); // Add the coordinates
    var mapOptions = {
        zoom: 6, // The initial zoom level when your map loads (0-20)
        minZoom: 5, // Minimum zoom level allowed (0-20)
        maxZoom: 8, // Maximum soom level allowed (0-20)
        zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
        },
        center: center, // Centre the Map to our coordinates variable
        //mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
        scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
        // All of the below are set to true by default, so simply remove if set to true:
        panControl: false, // Set to false to disable
        mapTypeControl: false, // Disable Map/Satellite switch
        scaleControl: false, // Set to false to hide scale
        streetViewControl: false, // Set to disable to hide street view
        overviewMapControl: false, // Set to false to remove overview control
        rotateControl: false // Set to false to disable rotate control
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var infowindow = new google.maps.InfoWindow({
        disableAutoPan: true
    });

    var location = {};


    /*hide world*/
    var style = [{
        featureType: 'all',
        elementType: 'all',
        stylers: [{
            "visibility": "simplified"
        }, {
            "color": "#f2f2f2"
        }]
    }];
    var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
    });
    map.mapTypes.set('map-style', styledMapType);
    map.setMapTypeId('map-style');
    /*end hide world*/
    /*
    layer_0 = new google.maps.FusionTablesLayer({
        query: {
            select: "geometry",
            from: "1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84"
        },
        styles: [{
            polygonOptions: {
                fillOpacity: '0.7',
            }
        }],
        options: {
            suppressInfoWindows: true
        },
        clickable: false,
        map: map,
        styleId: 2,
        templateId: 2,
    });
*/
    // Initialize JSONP request
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');
    var query = 'SELECT name, geometry, background FROM ' +
        '1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84';
    var encodedQuery = encodeURIComponent(query);
    url.push(encodedQuery);
    url.push('&callback=drawMap');
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
    script.src = url.join('');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);
}

google.maps.event.addDomListener(window, 'resize', function () {
    map.setCenter(map.getCenter());
}); // Keeps the Pin Central when resizing the browser on responsive sites

google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.

function drawMap(data) {
    var rows = data['rows'];
    for (var i in rows) {
        if (rows[i][0] != 'Antarctica') {
            var newCoordinates = [];
            var geometries = rows[i][1]['geometries'];
            if (geometries) {
                for (var j in geometries) {
                    newCoordinates.push(constructNewCoordinates(geometries[j]));
                }
            } else {
                newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
            }
            var randomnumber = Math.floor(Math.random() * 18);

            var country = new google.maps.Polygon({
                paths: newCoordinates,
                strokeColor: kmlToRgb(rows[i][2]), // colors[randomnumber], // rows[i][2], 
                strokeOpacity: 0,
                strokeWeight: 1,
                fillColor: kmlToRgb(rows[i][2]),
                fillOpacity: 0.3
            });
            google.maps.event.addListener(country, 'mouseover', function () {
                this.setOptions({
                    fillOpacity: 1
                });
            });
            google.maps.event.addListener(country, 'mouseout', function () {
                this.setOptions({
                    fillOpacity: 0.3
                });
            });

            country.setMap(map);
        }
    }
}

function constructNewCoordinates(polygon) {
    var newCoordinates = [];
    var coordinates = polygon['coordinates'][0];
    for (var i in coordinates) {
        newCoordinates.push(
        new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
    }
    return newCoordinates;
}

＆＃13;

html,body,#map-canvas{width: 100%; height:100%;}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

＆＃13;

悬停效果在谷歌地图融合表

2 个答案: