Question

将Google Fusion表格中的地图数据作为图层显示在Google地图上时，可以使用一组非常丰富的选项来自定义地图功能的外观和信息窗口的内容。您可以使用自己在运行时生成的样式/信息窗口（即通过客户端的代码），也可以使用您在Fusion Tables工具中创建的样式/信息窗口，但不能同时使用两者。对于给定地图视图尝试自定义的同一类行为是有意义的，因为否则会有两个相同操作的竞争命令。但是，我想知道我是否可以混合和匹配它，以便在客户端动态生成样式（使用样式部分/指令），但使用＆＃34;默认＆＃34;使用Fusion Tables工具设置的信息窗口。

以下示例代码说明了我理想的做法。请注意选项和样式块的存在。使用默认信息窗口的选项。和样式可以自定义地图功能的外观。

    layer = new google.maps.FusionTablesLayer({
  ...
  },
  options: {
    //styleID is removed from Options; using Styles below--styleId: 2,
     templateId: 2 //Info Window is left to be the default one.
  }

  //Styles section is used instead of default styleID in "options" above.  
  styles: [{
      where: "filter condition",
      polylineOptions: {
          strokeColor: "#ffbf00",
          strokeWeight: "3"
      }
  }]
});

Answer 1

是的，你可以。点击事件中提供样式化的infowindow内容。

请参阅the documentation：

FusionTablesMouseEvent对象规范

FusionTablesLayer上鼠标事件的属性。

infoWindowHtml | Type:  string | Pre-rendered HTML content, as placed in the infowindow by the default UI.

来自example fiddle

的

your previous question: “WHERE” clauses being ignored in Fusion Table Layer in Google Maps

代码段

＆＃13;

var geocoder = new google.maps.Geocoder();
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  layer = new google.maps.FusionTablesLayer({
    map: map,
    options: {
      // styleId: 2,
      templateId: 2
    },
    heatmap: {
      enabled: false
    },
    query: {
      select: "geometry",
      from: "1D6d93-0iT2zUCw8IvkbpDPYDx2-jA0ZAWXi07mQD",
    },
    styles: [{
      polylineOptions: {
        strokeOpacity: 0.001,
        strokeWeight: 0
      }
    }, {
      where: "SHIFT_ID = 3",
      polylineOptions: {
        strokeOpacity: 1.0,
        strokeColor: "#FFFFFF",
        strokeWeight: 3
      }
    }, {
      where: "SHIFT_ID = 1",
      polylineOptions: {
        strokeOpacity: 1.0,
        strokeColor: "#FF0000",
        strokeWeight: 3
      }
    }, {
      where: "SHIFT_ID = 2",
      polylineOptions: {
        strokeOpacity: 1.0,
        strokeColor: "#ffbf00",
        strokeWeight: "3"
      }
    }]
  });
  geocoder.geocode({
    'address': "Winnipeg, Canada"
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

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

＆＃13;

OPTIONS和STYLES可以用于Google地图中的FusionTableLayer吗？

1 个答案: