IndexedDB 错误:未捕获的数据克隆错误:无法对“IDBObjectStore”执行“放置”:无法克隆对象

ars1skjm  于 2023-01-28  发布在  IndexedDB
关注(0)|答案(2)|浏览(389)

我正在使用Google maps API和HTML 5 geolocation API将我的位置显示为Map上的标记。显示标记后,我有一个简单的on marker双击函数,它使用indexedDB将新标记保存到我的当前位置。一切都很顺利,直到对象将要存储,然后我收到消息"Uncatch 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()
vsikbqxv

vsikbqxv1#

marker无法克隆,因为存储在map-属性中的对象包含对DOMNode(#map-overview)的引用,而DOMNode(#map-overview)无法克隆(请参阅:结构化克隆不适用的事项)。
删除map-属性,它将根本不可重用,因为当您稍后检索标记时,google.maps.Map-示例将不存在。

gstyhher

gstyhher2#

我发现错误的原因是试图向缓存添加一个无法识别的对象。

this.storage.set ("page", HomePage);

我换了一根绳子,它起作用了

this.storage.set ("page", "HomePage");

相关问题