使用自定义网址图标设计融合表标记？ [英] Styling fusion table markers with custom url icons?

问题描述

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

  layer = new google.maps.FusionTablesLayer（{
查询：{
 select：'bizCity'，
 from：'1yfyijoeC3GwDnnLutBI8IFOH8y2mfZ8LJGUDly4'
}，
 styles：[
 {where：''bizCatSub'='古董与放大;经典摩托车经销商'，markerOptions：{iconName：star}}，//其他地标
 {其中：''bizCatSub'='其他moto business'，markerOptions：{iconName：wht_pushpin} }，// business 
 {where：''bizCatSub'='Shop'，markerOptions：{iconName：red_blank}}，// town houses 
 {where：''bizCatSub'=' 12'，markerOptions：{iconName：orange_blank}}，// country homes 
 {其中：''bizCatSub'='15'，markerOptions：{iconName：target}}，
] 
}）; 
 layer.setMap（map）; 
  

你可以看到 jsfiddle here 。

但是，我想使用我自己的自定义标记。为此，我尝试了这样的事情：

  layer = new google.maps.FusionTablesLayer（{
 query： {
 select：'bizCity'，
 from：'1yfyijoeC3GwDnnLutBI8IFOH8y2mfZ8LJGUDly4'
}，
款式：[
 {其中：''bizCatSub'='古董与经典摩托车经销商'，markerOptions：{url：http://pollster.net/test/icons/dealer.png}}，
 {其中：''bizCatSub'='其他摩托商业'，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 。我查看了样式和标记选项和图标的文档，并尝试了不同的变体，但没有任何工作适合我。我想我错过了一些简单的东西，但不知道是什么。

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

解决方案

图层实际上不允许自定义标记图标。这是一个已知问题： http://code.google.com/p/fusion-表格/问题/详细信息？id = 69

然而，有一些解决方法可能是Google员工发布的最简单的方法，该线程仅在几个月前： http://code.google.com/ p / fusion-tables / issues / detail？id = 69＃c107

解决方法的要点是，您将不再使用FusionTableLayer ，而是使用JavaScript来抓取融合表数据并自己添加自定义标记。这是更多的代码，但它似乎工作得很好： https://googledrive.com/host/0B9htKoV1ZaKUU1g3ZnJCUWQyd28/customicons_viaApi .html

I want to style my fusion table markers based on a field in the fusion table. If I use default Google markers, the following code works:

        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);

You can see the jsfiddle here.

However, I want to use my own custom markers. To this end, I tried something like this:

        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);

With the above code, the data shows up on the map, but it uses default markers instead of styling them as requested. Jsfiddle here. I looked at the documentation for styles and markeroptions and icons and tried different variations, but nothing is working for me. I think I'm missing something simple, but not sure what.

Anyone know what I'm missing?

解决方案

Fusion Table Layer doesn't actually allow custom marker icons. This is a known issue: http://code.google.com/p/fusion-tables/issues/detail?id=69

However, there are some workarounds, probably the easiest of which was posted by a Google employee near the bottom of that thread just a few months ago: http://code.google.com/p/fusion-tables/issues/detail?id=69#c107

The gist of the workaround is that you'll no longer be using a FusionTableLayer, but instead be using javascript to grab the fusion table data and add custom markers yourself. It's a bit more code, but it does seem to work pretty well: https://googledrive.com/host/0B9htKoV1ZaKUU1g3ZnJCUWQyd28/customicons_viaApi.html

这篇关于使用自定义网址图标设计融合表标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！