Google Fusion桌面热图嵌入式iFrame不显示多边形颜色

时间:2017-03-29 16:59:04

标签: google-fusion-tables google-api-php-client

我正在创建一个热图,显示使用PHP通过API使用KML数据的每个县的计数。表,样式和模板的创建按预期工作。从我的Google云端硬盘查看地图并使用Fusion Tables打开它们时,它们会正确显示。这意味着,地图显示了每个县的不同多边形颜色,具体取决于我通过API创建的计数和存储桶。

但是,我想使用嵌入式iFrame在不同的网页上显示这些地图。根据文档,嵌入使用默认样式。这恰好是我为它创造的那个。

但是,在使用嵌入式地图查看页面时,多边形会显示,但不会根据计数(如果单击多边形显示)进行着色。直到我通过网络界面进入地图,点击发布,颜色才开始出现在嵌入页面上。我还注意到另一种风格正在创建,但它与我已经拥有的相同(下图)。

所以问题是:有没有人遇到过这个问题?有没有办法使用PHP通过API设置发布?任何建议都会有所帮助。

API创建的第一个样式

  Google_Service_Fusiontables_StyleSettingList {#1164
  #collection_key: "items"
  #itemsType: "Google_Service_Fusiontables_StyleSetting"
  #itemsDataType: "array"
  +kind: "fusiontables#styleSettingList"
  +nextPageToken: null
  +totalItems: 1
  #internal_gapi_mappings: []
  #modelData: array:1 [
    "items" => array:1 [
      0 => array:4 [
        "kind" => "fusiontables#styleSetting"
        "tableId" => "1v0Q9grONGtJZAolcaBNLoQh691onorw0GVthYyiL"
        "styleId" => 1
        "polygonOptions" => array:1 [
          "fillColorStyler" => array:3 [
            "kind" => "fusiontables#buckets"
            "columnName" => "Count"
            "buckets" => array:5 [
              0 => array:4 [
                "min" => 0.0
                "max" => 25.0
                "color" => "#0000ff"
                "opacity" => 0.5
              ]
              1 => array:4 [
                "min" => 25.0
                "max" => 57.0
                "color" => "#33ffff"
                "opacity" => 0.5
              ]
              2 => array:4 [
                "min" => 57.0
                "max" => 161.0
                "color" => "#ffff00"
                "opacity" => 0.5
              ]
              3 => array:4 [
                "min" => 161.0
                "max" => 365.0
                "color" => "#ff6600"
                "opacity" => 0.5
              ]
              4 => array:4 [
                "min" => 365.0
                "max" => 20000.0
                "color" => "#ff0000"
                "opacity" => 0.5
              ]
            ]
          ]
        ]
      ]
    ]
  ]
  #processed: []
}

使用地图控制台和发布后添加第二个样式

  Google_Service_Fusiontables_StyleSettingList {#1164
  #collection_key: "items"
  #itemsType: "Google_Service_Fusiontables_StyleSetting"
  #itemsDataType: "array"
  +kind: "fusiontables#styleSettingList"
  +nextPageToken: null
  +totalItems: 2
  #internal_gapi_mappings: []
  #modelData: array:1 [
    "items" => array:2 [
      0 => array:4 [
        "kind" => "fusiontables#styleSetting"
        "tableId" => "1v0Q9grONGtJZAolcaBNLoQh691onorw0GVthYyiL"
        "styleId" => 1
        "polygonOptions" => array:1 [
          "fillColorStyler" => array:3 [
            "kind" => "fusiontables#buckets"
            "columnName" => "Count"
            "buckets" => array:5 [
              0 => array:4 [
                "min" => 0.0
                "max" => 25.0
                "color" => "#0000ff"
                "opacity" => 0.5
              ]
              1 => array:4 [
                "min" => 25.0
                "max" => 57.0
                "color" => "#33ffff"
                "opacity" => 0.5
              ]
              2 => array:4 [
                "min" => 57.0
                "max" => 161.0
                "color" => "#ffff00"
                "opacity" => 0.5
              ]
              3 => array:4 [
                "min" => 161.0
                "max" => 365.0
                "color" => "#ff6600"
                "opacity" => 0.5
              ]
              4 => array:4 [
                "min" => 365.0
                "max" => 20000.0
                "color" => "#ff0000"
                "opacity" => 0.5
              ]
            ]
          ]
        ]
      ]
      1 => array:5 [
        "kind" => "fusiontables#styleSetting"
        "tableId" => "1v0Q9grONGtJZAolcaBNLoQh691onorw0GVthYyiL"
        "styleId" => 2
        "name" => "Map of Geometry"
        "polygonOptions" => array:1 [
          "fillColorStyler" => array:3 [
            "kind" => "fusiontables#buckets"
            "columnName" => "Count"
            "buckets" => array:5 [
              0 => array:4 [
                "min" => 0.0
                "max" => 25.0
                "color" => "#0000ff"
                "opacity" => 0.5
              ]
              1 => array:4 [
                "min" => 25.0
                "max" => 57.0
                "color" => "#33ffff"
                "opacity" => 0.5
              ]
              2 => array:4 [
                "min" => 57.0
                "max" => 161.0
                "color" => "#ffff00"
                "opacity" => 0.5
              ]
              3 => array:4 [
                "min" => 161.0
                "max" => 365.0
                "color" => "#ff6600"
                "opacity" => 0.5
              ]
              4 => array:4 [
                "min" => 365.0
                "max" => 20000.0
                "color" => "#ff0000"
                "opacity" => 0.5
              ]
            ]
          ]
        ]
      ]
    ]
  ]
  #processed: []
}

1 个答案:

答案 0 :(得分:0)

After speaking with a Google tech, I found out the iFrame code uses a variable "y" that represents the style id. So in creating a style via the API and receiving the new id, you can then use this in the iFrame code for the map to make sure the right style is assigned.

<iframe width="700" height="500" scrolling="no" frameborder="no" src="https://fusiontables.google.com/embedviz?q=select+col2+from+{{ $project->fusion_table_id }}&amp;viz=MAP&amp;h=false&amp;lat=34.72404554786575&amp;lng=-93.08009375000002&amp;t=1&amp;z=3&amp;l=col2&amp;y={{ $project->fusion_style_id }}&amp;tmplt={{ $project->fusion_template_id }}&amp;hml=GEOCODE"></iframe>