Sencha Touch 2.3.1 - 努力将谷歌静态地图图像导入应用程序

Question

我是 ST 的新手，我确信我在这里遗漏了一些东西，但我的问题是我有位于本地存储存储中的标记的纬度、经度坐标（通过使用 API v3 单击谷歌地图获得），并且现在想要在选项卡面板上动态显示带有这些标记之一的静态地图（另一个选项卡显示我在信息窗口中捕获并添加到标记的详细信息，第三个选项卡将使用非常相似的获取街景图像Google Street View Image API 将其作为静态图像获取）。

静态地图 api 声明“Google 静态地图服务根据通过标准 HTTP 请求发送的 URL 参数创建您的地图，并将地图作为可以显示在网页上的图像返回”。

所以本质上我需要使用标记坐标动态填充 http 请求，然后使用它来请求图像。

我可以加载一个“静态”静态地图 - 使用 html 进行硬编码坐标，这很有效： html: ["http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=15&​​size=284x130&sensor=false\" /> ，但是如果我使用 tpl 尝试动态插入 lat,lng 坐标，它会失败（或者即使我使用 tpl 执行相同的请求： tpl: ["http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=15&​​size=284x130&sensor=false\" />"]

我还查看了 Ajax 请求，由于“相同域”限制而失败，这导致我尝试了 JsonP 请求。这实际上似乎是从谷歌获取图像（我可以在 chrome 开发人员工具的标题中看到它）但控制台告诉我“资源解释为脚本但使用 MIME 类型图像/png 传输”我猜这是真的，但我看不到提取图像的方法。

这实际上是一个简单的问题吗？我忽略了一些关于使用模板的问题，或者我遇到了一些需要更强大的 hack 的东西？

我可以提供更多代码来展示我尝试过和失败过的内容，但我希望任何精通 Sencha Touch 的人都能清楚地了解这个问题。

Answer 1

对于其他可能想知道的人，我发现可以通过创建图像标签并在函数中调用静态地图图像来使模板工作：

标签面板中的代码 sn-p； 'data' 是从列表视图中发送的 'markerLat, markerLng 是数据记录的字段： { xtype：'组件'， itemId: '静态地图', title: '静态地图', iconCls: '信息', tpl: Ext.create('Ext.XTemplate', '{[this.getImage(values)]}', '{markerType}', { // 如果可用，则返回静态图像。其他显示文本 获取图像：函数（数据）{ if (data.markerLat && data.markerLat !="") { var marker = "&markers=color:blue|label:S|" + data.markerLat + "," + data.markerLng; var center = "&" + data.markerLat + "," + data.markerLng; 返回 '​​'; } // 别的 return '没有可用的静态地图图像'; }, } ) // 结束 tpl } // 结束