iphone safariブラウザでsetPositionが更新されない

Question

Firebaseを使用して更新されたジオロケーションデータを取得するhtmlページがあります。そのデータを使用してGoogleマップのマーカーを更新します。ラップトップのクロムブラウザで地図がうまく動く（地図のレンダリングとマーカーが適切に動く）が、iPhoneのSafariブラウザで同じリンクを訪問すると、更新されたマーカー位置は受け取られません。

iphone Safariブラウザでは、地図がレンダリングされ、開始マーカー、目的地マーカー、現在の位置マーカーが表示されます。しかし、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

私は問題が何であるかを把握しました。さらにテストした後、私のアプリケーションがフォアグラウンドで動作していれば、マーカーが実際に更新されたことに気付きました。つまり、私のアプリからモバイルSafariブラウザに切り替えると、私のアプリケーションはfirebaseデータベースへのジオロケーションデータの送信を停止し、マーカーは新しい情報を受け取ることはなく、移動しなかったという印象を与えます。

しかし、私は携帯電話からモバイルアプリからジオロケーションをトリガーし、私の妻のモバイルサファリから上記のウェブサイトにアクセスしたとき、マーカーは実際に移動しました。

解決策は私のアプリがバックグラウンドでジオロケーションタスクを実行できるようにすることです。

あなたのサポートとフォローアップのために@leroy Thompsonに感謝します。

Answer 2

キャッシュの問題が発生しました。更新するたびにリフレッシュするためにランダムなキーを使用します。

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