Ошибка IndexedDB: Uncaught DataCloneError: не удалось выполнить 'put' on 'IDBObjectStore': объект не может быть клонирован

Question

Я использую API карт Google вместе с API привязки HTML 5, чтобы отобразить свою позицию в качестве маркера на карте , Как только этот маркер отображается, у меня есть простая функция двойного щелчка маркера, которая сохраняет новый маркер в моей текущей позиции с помощью indexedDB. Все идет хорошо, пока объект не будет сохранен, затем я получаю сообщение «Uncaught DataCloneError: не удалось выполнить« put »в« 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 -свойстве содержит ссылку на DOMNode (#map-overview), которые не могут быть клонированы (см: Things that don't work with structured clones).

Удалите map -property, он не будет повторно использоваться вообще, потому что google.maps.Map -instance не будет существовать при получении маркера позже.