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

时间:2014-05-14 12:32:00

标签: google-maps sencha-touch

我是ST的新手并且我确定我在这里遗漏了一些东西,但我的问题是我有坐在本地存储商店中的标记的lat,lng坐标(通过使用API​​ v3点击谷歌地图获得) ,现在想要在选项卡面板上动态显示带有这些标记之一的静态地图(另一个选项卡显示我在信息窗中捕获并添加到标记的详细信息,第三个选项卡将使用以下内容获取街景图像非常相似的Google街景图片API,可将其作为静态图片获取。)

静态地图api表示" Google静态地图服务根据通过标准HTTP请求发送的网址参数创建地图,并将地图作为您可以在网页上显示的图片返回"。

所以基本上我需要使用标记坐标动态填充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类型image / png"这是真的我猜,但我认为无法提取图像。

这实际上是一个简单的问题吗?我忽略了使用模板的事情,或者我遇到了需要更强大的黑客攻击的东西?

我可以提供更多代码来展示我尝试过但未通过的内容,但我希望任何精通Sencha Touch的人都能清楚地知道这个问题。

1 个答案:

答案 0 :(得分:0)

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

来自标签面板的

代码段; 'data'从列表视图'markerLat发送,markerLng是数据记录的字段: {     xtype:'component',     itemId:'staticMap',     标题:'静态地图',     iconCls:'info',     tpl:Ext.create('Ext.XTemplate',         '{[this.getImage(值)]}',         '{} markerType',         {         //返回静态图像(如果可用)。否则显示文字         getImage:function(data){         if(data.markerLat&& data.markerLat!=“”){         var markers =“& markers = color:blue | label:S |” + data.markerLat +“,”+ data.markerLng;         var center =“&” + data.markerLat +“,”+ data.markerLng;         返回'';         }         //别的         返回'没有静态地图图像';         },     }     )// END tpl } // END