javascript - setPosition 在 iphone safari 浏览器上不更新

Question

我有一个 html 页面，它使用 Firebase 来获取更新的地理位置数据。然后该数据用于更新谷歌地图中的标记。 map 在笔记本电脑上的 Chrome 浏览器中工作正常( map 渲染，标记相应移动)，但是当我在 iPhone Safari 浏览器上访问相同的链接时，我没有收到更新的标记位置。

在 iPhone Safari 浏览器中， map 会呈现，显示起始标记、目的地标记和当前位置标记。但是当 firebase 需要触发当前位置标记更改时，什么也没有发生。

我知道位置数据是准确的，并且正在发送，因为它在笔记本电脑上运行。但由于某种原因，setPosition 函数似乎无法在移动浏览器上正确触发。下面是相关的javascript。我遗漏了用户特定信息只是因为……好吧，这是互联网。有人知道为什么 setPosition 在移动设备中显示时不更新 currentPosition 标记吗？

 <script>
    var styles1 = code omitted for simplicity

    var map;
    var userLocationMarker;
    var userDestinationMarker;
    var HakiFirebaseRef = new Firebase("https://leftOutOnPurpose");
    var WMBHakiFirebaseRef;
    var user;

    function initialize(){
        this.initMap();
        if (isWatchMyBackClient()) {
            uuid = getClientUuid();
            setFirebaseData(uuid);
        }

    }

    function initMap(){
        styledMap = new google.maps.StyledMapType(styles1, {name:"Blizzard Haki"});
        mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(48.864716, 2.349014),
            // center: LatLng, //should be firebase longLat
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'blizzard_style']
            }
        };
        map = new google.maps.Map(document.getElementById('wmbMap'), mapOptions);
        //Associate the styled map with the map type id
        map.mapTypes.set('blizzard_style', styledMap);
        map.setMapTypeId('blizzard_style');
    }

    /**********************/
    /*  HELPER FUNCTIONS  */
    /**********************/
    function isWatchMyBackClient(){
        //check for a uuid in the header
        var query = window.location.search;

        if (query.indexOf("?") !== -1){
            return true;
        }
        return false;
    }

    function getClientUuid(){
        var uuid = "";
        var queryUrl =  window.location.search;
        uuid = queryUrl.slice(1);

        return uuid;
    }

    function setFirebaseData(uuid){
        WMBHakiFirebaseRef = HakiFirebaseRef.child("WMB").child(uuid);
        WMBHakiFirebaseRef.once("value", function(userdata){
            user = userdata.val();
            if(userdata.val() !== null){
                setUserMarker(userdata.val());
                setDestinationMarker(userdata.val());
                watchUser();
            } else {
                console.log("Could not get user data")
            }
        });
    }

    function setUserMarker(userData){
        var myLatlng = new google.maps.LatLng({lat: userData.latitude, lng: userData.longitude});
        var infoWindow = new google.maps.InfoWindow({
            content: "starting location"
        });
        var greenPin = '/images/green-pin.png';
        var markers = new google.maps.Marker({
            position:myLatlng,
            map: map,
            title: 'starting Location',
            icon: greenPin
        });
        google.maps.event.addListener(markers, 'click', function() {
           infoWindow.open(map,markers);
        });

    }

    function setDestinationMarker(userData){
        var infoWindowd = new google.maps.InfoWindow({
            content: "My Destination"
        });
        var destpin = '/images/destpin.png';

        destMarker = new google.maps.Marker({
            position: new google.maps.LatLng(userData.dest_latitude,userData.dest_longitude),
            map: map,
            title: 'My Destination',
            icon: destpin
        });
        google.maps.event.addListener(destMarker, 'click', function() {
           infoWindow.open(map, destMarker);
        });
        destMarker.addListener('click', function() {
            infoWindowd.open(map, destMarker);
        });
    }

    function watchUser() {
        WMBHakiFirebaseRef.on('value', function(userData) {
            user = userData.val();
            var latLng = new google.maps.LatLng(user.latitude,  user.longitude);
            var destLatLng = new google.maps.LatLng(user.dest_latitude,  user.dest_longitude);
            updateUserMarker(latLng);
            updateDestinationMarker(destLatLng);

        });

    }

    function updateUserMarker(latLng){
        if(!userLocationMarker) {
            var image = '/images/currLocBtn.png';
            var userInfoWindow = new google.maps.InfoWindow({
                content: 'Current Location'
            });
            userLocationMarker = new google.maps.Marker({
                map: map,
                title: 'Current Location',
                icon: image
            });
            google.maps.event.addListener(userLocationMarker, 'click', function() {
               userInfoWindow.open(map, userLocationMarker);
            });
        }
        //update info window here later
        userLocationMarker.setPosition(latLng);
    }

    function updateDestinationMarker(destLatLng){
        destMarker = new google.maps.Marker({
            map: map
        });
        destMarker.setPosition(destLatLng);

    }

</script>

Answer 1

存在缓存问题，每次更新后使用随 secret 钥刷新。

var k = Math.random();
var HakiFirebaseRef = new Firebase("https://leftOutOnPurpose?k="+k);