【问题标题】:Google Fusion Table Heat Map Embedded iFrame Not Displaying Polygon Colors谷歌融合表热图嵌入式 iFrame 不显示多边形颜色
【发布时间】:2017-03-29 16:59:04
【问题描述】:

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

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

但是,当查看带有嵌入地图的页面时,多边形会显示,但不会根据计数(如果单击多边形会显示)显示颜色。直到我通过 Web 界面进入地图,单击发布,颜色才开始出现在嵌入页面上。我还注意到正在创建另一种样式,但它与我已经拥有的样式重复(如下)。

所以问题是:有人遇到过这个问题吗?有没有办法使用 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: []
}

【问题讨论】:

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


    【解决方案1】:

    在与 Google 技术人员交谈后,我发现 iFrame 代码使用了一个表示样式 ID 的变量“y”。因此,在通过 API 创建样式并接收新 id 时,您可以在地图的 iFrame 代码中使用它来确保分配正确的样式。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-11-13
      • 1970-01-01
      • 2013-12-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多