indexedDBにGoogleマップマーカーを保存していますか？

Question

IndexedDBにgoogle mapsのマーカーを保存したいのですが、オブジェクトをクローンできないというエラーが出ていますか？これに対する任意の回避策？

Answer 1

マーカーが関数オブジェクトの場合、indexedDBが使用する構造化されたクローニングアルゴリズムに従って直列化できません。回避策は、マーカーのデータのシリアライズ可能な形式を取得することです。例：

function googleMapsMarkerToSerializable(markerObject) { 
    var outputObject = {}; 
    outputObject.position = markerObject.position; 
    outputObject.title = markerObject.title; 
    outputObject.draggable = markerObject.draggable ? 1 : 0; 
    outputObject.mapElementId = markerObject.map.getAttribute('id'); 
    return outputObject; 
} 

function googleMapsMarkerFromSerializable(inputObject) { 
    var parameters = {}; 
    parameters.position = inputObject.position; 
    parameters.map = document.getElementById(inputObject.mapElementId); 
    parameters.title = inputObject.title; 
    parameters.draggable = inputObject.draggable ? true : false; 
    return new google.maps.Marker(parameters); 
} 

function storeMarker(db, marker, callback) { 
    var tx = db.transaction('markers', 'readwrite'); 
    var store = tx.objectStore('markers'); 
    var serializableMarker = googleMapsMarkerToSerializable(marker); 
    store.put(serializableMarker); 
    tx.oncomplete = callback; 
} 

function loadMarker(db, markerId, callback) { 
    var tx = db.transaction('markers'); 
    var store = tx.objectStore('markers'); 
    var request = store.get(markerId); 
    request.onsuccess = function onRequestSuccess(event) { 
    var serializableMarker = event.target.result; 
    if(!serializableMarker) { 
     callback(null); 
    } else { 
     var marker = googleMapsMarkerFromSerializable(serializableMarker); 
     callback(marker); 
    } 
    }; 
} 


// In the query section of your code: 
var request = indexedDB.open(...); 
request.onsuccess = function(event) { 
    var db = event.target.result; 
    var someMarkerId = 5; 
    loadMarker(db, someMarkerId, function(marker) { 
    console.debug('Loaded marker:', marker); 
    }); 
};