IndexedDB错误：未捕获的DataCloneError：无法在“ IDBObjectStore”上执行“ put”：无法克隆对象

Question

我正在使用Google Maps API和HTML 5 geolocation API来将我的位置显示为地图上的标记。一旦显示了该标记，我就可以使用一个简单的标记双击功能，该函数可以使用indexedDB将新标记保存到当前位置。一切顺利，直到将要存储对象为止，然后在控制台中收到消息“ 未捕获的DataCloneError：无法在'IDBObjectStore'上执行'put'：无法克隆对象。 ”。我的代码如下：

        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

marker不能被克隆，因为存储在对象map-property包含对的DOMNode（基准#map-overview），这是不能被克隆（参见：Ť hings不与结构化的克隆工作）。

删除map-property，它将根本无法重用，因为google.maps.Map以后再检索标记时-instance将不存在。