javascript - IndexedDB error: Uncaught DataCloneError: Failed to execute 'put' on 'IDBObjectStore': An object could not be cloned -
i using google maps api along html 5 geolocation api display position marker on map. once marker displayed have simple on marker double click function saves new marker current position using indexeddb. goes until object stored, recieve message "uncaught datacloneerror: failed execute 'put' on 'idbobjectstore': object not cloned." in console. code follows:
function initialize() { var mapproperties = { // set 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 map in map-overview div function nogeolocation(e) { //a function handle users not have geolocation if (e) { var content = 'error: unfortunately geolocation service failed.'; } else { var content = 'error: sorry, 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 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 marker var marker = { position: position, map: map, title: 'new marker' } console.log(marker); console.log("about perform add"); //perform 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 error } }); map.setcenter(position); }, function() { nogeolocation(true); // refers nogeolocation function }); } else { // if user's browser doesn't support geolocation nogeolocation(false); } //end of html5 geolocation } // end of function initializes google maps google.maps.event.adddomlistener(window, 'load', initialize); //on page load, execute initialize()
marker can't cloned because object stored in map-property contains reference domnode(#map-overview), can't cloned (see:things don't work structured clones ).
remove map-property, not re-usable @ because google.maps.map-instance not exist when retrieve marker later.
Comments
Post a Comment