【问题标题】:styling icons markers - fusion tables样式图标标记 - 融合表
【发布时间】:2012-03-28 22:40:19
【问题描述】:

这是为了帮助像我这样的其他新手。

我费了很长时间才弄清楚如何在我的融合表项目中为不同类别的标记分配不同的图标。我发现文档有限且令人困惑,我认为如果我感到困惑,那么其他人可能也是如此。

在其他人的帮助和大量测试的帮助下,我现在可以与您分享两种方法来实现这一点。

首先请注意,可用于融合表的图标非常有限,您可以在此处看到一组图标: http://www.google.com/fusiontables/DataSource?dsrcid=308519
放大漂浮在海洋上的图标,然后单击您喜欢的图标以了解其名称。

1。从融合表内部进行造型:
创建一个名称类似于“样式”的列。请务必将其 TYPE 设置为 TEXT。
在该列中,添加要用于不同类别的图标的名称。
名称示例:星号、目标和“red_blank”。
当您在地图视图中时,单击配置样式按钮。在点/标记图标下,选择列。单击“使用列中指定的图标”,然后从下拉列表中选择您设置的列名称,例如。 “风格”。
查看地图,您应该会看到显示的各种图标。

2。在您的 javascript 中设置样式:
将样式部分添加到您的代码中。这是一个示例(在这种情况下,样式类别是用数字编码的):

layer_2 = new google.maps.FusionTablesLayer({
  suppressInfoWindows:true,
  query: {
    select: 'Location',
    from: 'tableid' //add the id number of your table here, inside the quotes
  },

styles: [
  {where: "'style' = 14", markerOptions:{ iconName:"star"}}, // other landmarks
  {where: "'style' = 13", markerOptions:{ iconName:"wht_pushpin"}}, //businesses
  {where: "'style' = 11", markerOptions:{iconName:"red_blank"}}, //town houses
  {where: "'style' = 12", markerOptions:{ iconName:"orange_blank"}}, //country homes
  {where: "'style' = 15", markerOptions:{ iconName:"target"}},
  ]});

这两种方法都很好用。与两者一起工作后,我现在认为我更喜欢在 fusion 表中执行此操作,只是因为我发现保留 javascript 越简单,就越适合我。

但是,通过 JS 控制它可以更轻松地动态更改图标,因为您只需更改一行代码,而不是通过表格的每一行更改 Style 列中的图标名称。

我希望这会有所帮助。
温迪

【问题讨论】:

  • 太棒了,谢谢分享!
  • 也许您应该补充一点,您只能将样式应用于一层。我在融合表组的某个地方读到了。因为每种样式都是不同的查询,他们希望将查询限制在他们的服务器上。

标签: google-fusion-tables


【解决方案1】:

还值得查看这篇帮助文章,该文章描述了如何使用合并功能快速创建为表格中的行分配样式/图标的列:

Using Merge to apply map styles by category

【讨论】:

  • 这是一个很好的提示,我不知道合并功能可以这样使用。谢谢。
【解决方案2】:

对于自定义标记,请使用此而不是 FusionTablesLayer, http://code.google.com/p/gmaps-samples/source/browse/trunk/fusiontables/custom_markers.html?spec=svn2515&r=2515,我认为它们可以与 makerclusters 一起使用。

【讨论】:

    【解决方案3】:

    还要注意,由于不清楚的原因,您可以在经典和当前的融合表界面中得到不同的结果。我的 fusiontablelayer 没有在我的地图上显示正确的样式,即使在 fusion table 可视化上一切都很好,但是当我切换到经典并重置图标列并修复 infowindow 样式时,一切都到位了。奇怪,但它奏效了。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-10-13
      • 2011-10-23
      • 2011-09-14
      相关资源
      最近更新 更多