IndexedDB錯誤：未捕獲DataCloneError：未能在'IDBObjectStore'上執行'put'：無法克隆對象

Question

我正在使用Google maps API和HTML 5地理定位API在地圖上顯示我的位置作爲標記。一旦顯示這個標記，我有一個簡單的標記雙擊功能，使用indexedDB將新標記保存到當前位置。一切進展順利，直到對象即將被存儲，然後我收到消息「未捕獲的DataCloneError：未能執行'放''IDBObjectStore'：一個對象無法克隆。」在控制檯。我的代碼如下：

 function initialize() { 
      var mapProperties = { // Set the maps properties 
      center:new google.maps.LatLng(55.8580,-4.2590), 
      zoom:8, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
      };  

      var map=new google.maps.Map(document.getElementById("map-overview"),mapProperties); //Display the map in the map-overview div 








      function NogeoLocation(e) { //A function to handle users that do not have Geolocation 
      if (e) { 
      var content = 'Error: Unfortunately the Geolocation service failed.'; 
      } else { 
      var content = 'Error: Sorry, Your web browser doesn\'t support geolocation.'; 
      } 

      var options = { //Error options 
      map: map, 
      position: new google.maps.LatLng(60, 105), //Set new position on Error 
      content: content //Display error message 
      }; 

      var infowindow = new google.maps.InfoWindow(options); 
      map.setCenter(options.position); 


     } 


      //Using HTML5 Geolocation 
      if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
       var position = new google.maps.LatLng(position.coords.latitude, 
               position.coords.longitude); 







      var contentString = "Here is your current location!" + "<button onclick='myBtn()'>Save</button>" 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 


      var marker = new google.maps.Marker({ 
       position: position, 
       map: map, 
       title: 'My House' 
      }); 




      google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,marker); 
      }); 

     var db; 

     function indexedDBOk() { 
      return "indexedDB" in window; 
     } 

     google.maps.event.addListener(marker, 'dblclick', function() { 

     alert("dbl Click"); 

     console.log(position); 



      if(!indexedDBOk) return; 

      var openRequest = indexedDB.open("idarticle_people",1); 

      openRequest.onupgradeneeded = function(e) { 
       var thisDB = e.target.result; 

       if(!thisDB.objectStoreNames.contains("people")) { 
        thisDB.createObjectStore("people"); 
       } 
      } 

      openRequest.onsuccess = function(e) { 
       console.log("running onsuccess"); 

       db = e.target.result; 




      var transaction = db.transaction(["people"],"readwrite"); 
      var store = transaction.objectStore("people"); 

      //Define a marker 
      var marker = { 
      position: position, 
      map: map, 
      title: 'New Marker' 
     } 
     console.log(marker); 
     console.log("about to perform add"); 
      //Perform the add 
      var request = store.put(marker,1); 

      console.log("added"); 

      request.onerror = function(e) { 
       console.log("Error",e.target.error.name); 
       //some type of error handler 
      } 

      request.onsuccess = function(e) { 
       console.log("Woot! Did it"); 
      } 



      } 

      openRequest.onerror = function(e) { 
       //Do something for the error 
      } 





     }); 













       map.setCenter(position); 
      }, function() { 
       NogeoLocation(true); // Refers to NogeoLocation function 
      }); 
      } else { 
      // If the user's browser doesn't support Geolocation 
      NogeoLocation(false); 
      } //End of HTML5 GeoLocation 










      } // End of the function that initializes Google Maps 


     google.maps.event.addDomListener(window, 'load', initialize); //On page load, execute initialize() 

Answer 1

無法克隆，因爲存儲在map -property該對象包含到的DOMNode（#map-overview），其不能被克隆（參見：Things that don't work with structured clones）的引用。

刪除map屬性，它將不會被重用，因爲稍後檢索標記時google.maps.Map - 實例將不存在。