在 indexedDB 中保存 google 个地图标记？

Question

我想在 IndexedDB 中保存 google 地图标记，但是，我一直收到无法克隆对象的错误消息？有什么解决方法吗？

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 中保存 google 个地图标记？

Saving google map marker in indexedDB?

google-maps

google-maps-markers

indexeddb