Question

我在地图上设置了两个图层。我使用了这里给出的建议： https://developers.google.com/fusiontables/docs/samples/multiple_layers_per_map

当我加载地图时，我希望第1层的某些多边形根据字段值填充不同的颜色，并根据字段值从第2层的某些记录中填充不同的颜色。

这是我迄今为止所做的工作...... 但是在地图之前放置Style语句：map line不起作用......

＆＃13;

function initialize_1() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(51.4, -0.1),
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infoWindow = new google.maps.InfoWindow();

  // Initialize the first layer
  var firstLayer = new google.maps.FusionTablesLayer({
    query: {
      select: 'LAD10CD',
      from: '1vWDu0FYiPNYEg6ZjLOOtNd6RYd1E_mWr-i5obblp',
      where: 'LAD10CD like \'E0%\''
    },
    //This is the type of style I am trying to add:
    //styles:[{where: 'LAD10CD like \'E0%\'', polygonOptions:{fillcolor:'#000000'}}]
    styles:[
      {where: 'LAD10CD like \'E09%\'', 'polygonOptions':{'fillColor':'#00ff00'}},
      {where: 'LAD10CD like \'E07%\'', 'polygonOptions':{'fillColor':'#0000ff'}}
    ],
//    Where can I find the styleId ?
//    styleId: 3,
    
    map: map,
    suppressInfoWindows: false
  });

  google.maps.event.addListener(firstLayer, 'click', function(e) {
    windowControl(e, infoWindow, map);
  });

  // Initialize the second layer
  var secondLayer = new google.maps.FusionTablesLayer({
    query: {
      select: 'lat',
      from: '1Pe6lQx3KaFyP5pbhxWfERVciEuqYyBv1Dmcc_f5N',
      where: 'ClinicType Like \'%\''
    },
    //
    styleId: 2,
    map: map,
    suppressInfoWindows: false
  });
  google.maps.event.addListener(secondLayer, 'click', function(e) {
    windowControl(e, infoWindow, map);
  });

}

＆＃13;

<html>

<head>
  <title>Google Maps API Example: Loacal Authorities Layer</title>

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v3.24&MyKey=WentInHere"></script>

  <script type="text/javascript">
    <!--Insert the javascript below, if you are trying this code-->
  </script>
</head>

<body onload="initialize_1()">
  <div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>

</html>

＆＃13;

Answer 1

如果您想使用这些样式，可以试试这个：

styles: [{where:'LAD10CD like \'E09%\'', 'polygonOptions': {'fillColor': '#000000'}}],

我认为，在你的代码中，有些aphostropes遗失了。另一方面，我无法使用相应的字段值设置填充颜色。但是在fusiontables中你可以创建一个样式化的地图，你可以在其中将'FillColour'字段设置为多边形的填充颜色。

有一个样式化的地图已经被称为“几何图谱”，其ID为3.如果您创建了更多地图，则可以在URL的en处查看其ID。（地图：ID =）因此，您可以将此ID用作'styleId'，如下所示：

var firstLayer = new google.maps.FusionTablesLayer({
query: {
  select: 'LAD10CD',
  from: '1vWDu0FYiPNYEg6ZjLOOtNd6RYd1E_mWr-i5obblp',
  where: 'LAD10CD like \'E09%\''
},
styleId: 3,
map: map,
suppressInfoWindows: true
});

我希望这会有所帮助。

Answer 2

感谢MKiss的信息...... 要创建基于FusionTables的多层Google地图并控制图层的样式：

使用OP中的代码段选项1：每个层中最多可以包含五个where子句：

styles: [{where:'LAD10CD like \'E09%\'', 'polygonOptions': {'fillColor': '#000000'}}],

选项2 ::在FusionTable地图中创建样式，并在多层地图脚本中使用FusionTable地图的styleId。 FusionTable地图的styleId可以在FusionTable中找到工具|发布“发送链接到电子邮件或IM”，样式ID是发布URL中y =之后的数字：

styleId: 3,

为每个Map具有多个图层的Fusion Table设置polygonOption样式

2 个答案: