Question

我正在使用Google maps API和HTML 5地理定位API来显示我在地图上作为标记的位置。显示此标记后，我有一个简单的标记双击功能，使用indexedDB将新标记保存到当前位置。一切顺利，直到Object即将存储，然后我收到消息＆＃34; 未捕获的DataCloneError：无法执行＆＃39; put＆＃39; on＆＃39; IDBObjectStore＆＃39;：无法克隆对象。＆＃34;在控制台中。我的代码如下：

        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 - 属性中的对象包含对DOMNode（#map-overview）的引用，无法对其进行克隆（见：Things that don't work with structured clones）。

删除map - 属性，它根本不可重复使用，因为稍后检索标记时google.maps.Map - 实例将不存在。

Answer 2

我发现错误的原因是试图将无法识别的对象添加到缓存中。

this.storage.set（“页面”，主页）；

我切换到字符串，并且可以正常工作

this.storage.set（“页面”，“首页”）；

IndexedDB错误：未捕获的DataCloneError：无法执行＆＃39; put＆＃39; on＆＃39; IDBObjectStore＆＃39;：无法克隆对象

2 个答案: