javascript - 索引数据库错误 : Uncaught DataCloneError: Failed to execute 'put' on 'IDBObjectStore' : An object could not be cloned

Question

我正在使用 Google map API 和 HTML 5 地理定位 API 将我的位置显示为 map 上的标记。显示此标记后，我有一个简单的标记双击功能，可以使用 indexedDB 将新标记保存到我的当前位置。一切顺利，直到对象即将被存储，然后我在控制台收到消息“Uncaught DataCloneError: Failed to execute 'put' on 'IDBObjectStore': An object could not be clone.” .我的代码如下:

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-property，它根本无法重复使用，因为稍后检索标记时 google.maps.Map-instance 将不存在.