使用自定义网址图标设置融合表标记?

时间:2013-01-28 20:33:39

标签: google-maps-api-3 google-maps-markers google-fusion-tables

我想根据融合表中的字段设置我的融合表标记的样式。如果我使用默认的Google标记,则以下代码有效:

        layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'bizCity',
        from: '1yfyijoeC3GwDnnLutBI8IFOH8y2mfZ8LJGUDly4'
      },
    styles: [
  {where: "'bizCatSub' = 'Antique & Classic Motorcycle Dealers'", markerOptions:{ iconName:"star"}}, // other landmarks
  {where: "'bizCatSub' = 'Other moto business'", markerOptions:{ iconName:"wht_pushpin"}}, //businesses
  {where: "'bizCatSub' = 'Shop'", markerOptions:{iconName:"red_blank"}}, //town houses
  {where: "'bizCatSub' = '12'", markerOptions:{ iconName:"orange_blank"}}, //country homes
  {where: "'bizCatSub' = '15'", markerOptions:{ iconName:"target"}},
  ]  
    });
    layer.setMap(map);

您可以看到jsfiddle here

但是,我想使用自己的自定义标记。为此,我尝试过这样的事情:

        layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'bizCity',
        from: '1yfyijoeC3GwDnnLutBI8IFOH8y2mfZ8LJGUDly4'
      },
    styles: [
  {where: "'bizCatSub' = 'Antique & Classic Motorcycle Dealers'", markerOptions:{ url: "http://pollster.net/test/icons/dealer.png" }}, 
  {where: "'bizCatSub' = 'Other moto business'", markerOptions:{ url: "http://pollster.net/test/icons/othermoto.png" }}, 
  {where: "'bizCatSub' = 'Shop'", markerOptions:{ url: "http://pollster.net/test/icons/shop.png" }}
  ]  
    });
    layer.setMap(map);

使用上面的代码,数据显示在地图上,但它使用默认标记,而不是根据请求设置样式。 Jsfiddle here。我查看了样式和标记选项和图标的文档,并尝试了不同的变体,但没有任何对我有用。我想我错过了一些简单的东西,但不确定是什么。

任何人都知道我缺少什么?

2 个答案:

答案 0 :(得分:10)

Fusion Table Layer实际上不允许自定义标记图标。这是一个已知问题:http://code.google.com/p/fusion-tables/issues/detail?id=69

然而,有一些解决方法,可能是几个月前谷歌员工在该主题底部附近发布的最简单的解决方法:http://code.google.com/p/fusion-tables/issues/detail?id=69#c107

解决方法的要点是你将不再使用FusionTableLayer,而是使用javascript来获取融合表数据并自己添加自定义标记。这是一些代码,但它似乎运行得很好:https://googledrive.com/host/0B9htKoV1ZaKUU1g3ZnJCUWQyd28/customicons_viaApi.html

答案 1 :(得分:3)

您无法在FusionTablesLayers中使用自己的自定义图标,只能使用按名称定义的图标(请参阅here)。

如果您需要使用自己的并且可以在不使用基于FusionTablesLayer图块的渲染时获得性能影响,您可以使用GViz或Fusion Tables查询API查询表格以使用Google Maps API v3自定义图标。

请参阅标记为“不可行”的this issue,但包括a work around