struggling to get google static map image into app

2018-06-24 02:31:13

I'm new with ST and am sure I am missing something here but my problem is that I have lat,lng coordinates for markers sitting in a local storage store (acquired by clicking on a google map using API v3), and now want to dynamically show a static map with one of these markers on, on a tab panel (the other tab shows details that I capture in an infowindow and add to the marker, and a 3rd tab will grab a streetview image using the very similar Google Street View Image API to get that as a static image).

The static map api states " The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page".

So essentially I need to dynamically populate the http request with the marker coordinates then use this to ask for the image.

I can load a 'static' static map - with hard coded coordinates using html and that works: html: ["http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=15&size=284x130&sensor=false" /> , but if I use tpl to try and insert the lat,lng coordinates dynamically, it fails (or even if I do the same request with tpl: tpl: ["http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=15&size=284x130&sensor=false" />"]

I've also looked at Ajax requests, which fail because of the 'same domain' restriction, which led me to try a JsonP request. This actually seems to get the image from google (I can see it in the headers with chrome developer tools) but the console tells me "Resource interpreted as Script but transferred with MIME type image/png" which is true I guess but I see no way to extract the image.

Is this actually an easy problem and I'm overlooking something about using templates or have I come across something that is needing a stronger hack?

I can give more code to show what I've tried and failed with, but am hoping that the problem is fairly clear to anyone versed in Sencha Touch.

For others who might want to know, I found that templates could be made to work by creating the image tag and call to the static map image within a function:

code snippet from a tab panel; 'data' is sent from a list view 'markerLat, markerLng are fields of a data record: { xtype: 'component', itemId: 'staticMap', title: 'Static map', iconCls: 'info', tpl: Ext.create('Ext.XTemplate', '{[this.getImage(values)]}', '{markerType}', { // Returns the static image if available. Else shows text getImage: function (data) { if (data.markerLat && data.markerLat !="") { var markers = "&markers=color:blue|label:S|" + data.markerLat + "," + data.markerLng; var centre = "&" + data.markerLat + "," + data.markerLng; return ''; } // else return 'no static map image available'; }, } ) // END tpl } // END

链接地址: http://www.djcxy.com/p/67538.html

上一篇: Google Maps API for Business配额

下一篇: 努力将谷歌静态地图图像转化为应用程序