开发者

Google Maps API v3 marker setPosition not working in Safari (sencha touch)

I am using Sencha Touch to develop a mobile version of a Bus Tracker for Boston University. The problem I a running into is that the method setPosition() for a google.maps.Marker is not rendering the position change in Safari or any Mobile browser.

The code set up is as follows:

  • I initialize an empty markers array
  • I initialize the map using Ext.Map() (sencha call)
  • I load data using a JSONP request every 5 seconds interval
  • Every time I get new data, I check if I have a marker for that bus id inside my markers array
  • If I don't I create a new marker and push it into my markers array
  • Otherwise I call setPosition with my new position on that marker in my markers array.
  • I then run a check to make sure the marker's position got updated to the position received from my JSON request

I have verified (I think) that the marker inside the markers array is getting the new position everytime. Also, in Chrome and Firefox, my buses move (as expected), but in safari and iPhone/Android b开发者_开发问答rowsers, nothing moves.

Here is the code snippet:

var markers = {};
var busesFunc = function()
{
    Ext.util.JSONP.request({
        url: 'http://m.cms-devl.bu.edu/rpc/bus/livebus.json.php',
        callbackKey: 'callback',
        params: {
        },
        callback: function(data) {
            buses = data.ResultSet.Result;          

            for (var i = 0, ln = buses.length; i < ln; i++) {
                var bus = buses[i];

                var position = new google.maps.LatLng(bus.lat, bus.lng); 

                if(!markers[bus.id])
                {
                     markers[bus.id] = new google.maps.Marker({
                            map: map.map,
                            title: 'hello',
                            clickable: true,
                            draggable: false,
                            position: position,
                            icon: "images/bg.png",
                            zIndex: 100
                        });
                 }

                 markers[bus.id].setPosition(position);
                 //markers[bus.id].setIcon("images/bg.png");
                 //markers[bus.id].setMap(map.map);
                 //markers[bus.id].setMap(map.map);

                 if(bus.lat != markers[bus.id].position.lat()  || bus.lng != markers[bus.id].position.lng())
                 {
                    console.log(bus.id + " " + bus.lat + " " + bus.lng);
                    console.log(bus.id + " " + markers[bus.id].position.lat() + " " + markers[bus.id].position.lng());
                 }
            }
        }
    });
}
setInterval(busesFunc, 5000);

You can view the sample here: http://www.bu.edu/nisdev/students/luiscarr/liveBusMobile/

And the whole javascript is called functions.js (I can't post more than one link)


[Sencha Person] markers not showing up is a known bug in the 0.93 beta release. The 0.94 release (current one) has this fixed.


Problem solved by making a unique request every interval. I figured it was a caching problem after some more debugging. So I added a timestamp parameter to the JSONP request and it was all fixed.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜