Question

我想在IndexedDB中保存谷歌地图标记，但是，我一直收到无法克隆该对象的错误？对此有何解决方法？

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);
  });
};

在indexedDB中保存谷歌地图标记？

1 个答案: