Google Maps mit lokalem Speicher plotten

Question

Ich habe eine Anwendung erstellt, die es einem Benutzer ermöglicht, ein Flag in Google Maps auf ein Klickereignis zu zeichnen, obwohl nach dem Aktualisieren der Seite alle Flags verloren gehen. Ich möchte in der Lage sein, die Daten, die der Benutzer eingegeben hat, mit lokalem Speicher zu speichern. Kann mir jemand eine Richtung zeigen oder mir einen Beispielcode zeigen, wie sie mit diesem Problem umgehen würden? Vielen Dank.

Grund Google Maps Code ohne lokalen Speicher

var map; 
var myCenter=new google.maps.LatLng(54.906435, -1.383944); 

function initialize() 
{ 
var mapProp = { 
    center:myCenter, 
    zoom:13, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

     //creating the event for placing the marker 
    google.maps.event.addListener(map, 'click', function(event) { 
    placeMarker(event.latLng); 
    }); 

} 
//Funcion to place the marker on the map (flag) 
function placeMarker(location) { 

    var marker = new google.maps.Marker({ 
    position: location, 
    icon:'flag.png', 
    map: map, 
    }); 
    //open information window once marker is placed 
    var infowindow = new google.maps.InfoWindow({ 
    content: 'User has placed warning' 
    }); 
    infowindow.open(map,marker); 

    //zoom into the marker 
    google.maps.event.addListener(marker,'click',function() { 
    map.setZoom(17); 
    map.setCenter(marker.getPosition()); 
    }); 

} 


google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

Dies sollte den Trick tun;)

function initialize() 
 
{ 
 
var mapProp = { 
 
    center:myCenter, 
 
    zoom:13, 
 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
 

 
     //creating the event for placing the marker 
 
    google.maps.event.addListener(map, 'click', function(event) { 
 
    writeToStorage(event.latLng); 
 
    placeMarker(event.latLng); 
 
    }); 
 
    
 
    setupStorage(); 
 
    readFromStorage(); 
 
} 
 

 
function setupStorage() { 
 
    if(typeof(localStorage) === "undefined") { 
 
    // If localStorage isn't supported, fake it. 
 
    // Won't persist between sessions. 
 
    localStorage = {}; 
 
    } 
 
    
 
    localStorage.locations = localStorage.locations || []; 
 
} 
 

 
function writeToStorage(location) { 
 
    localStorage.locations.push(location); 
 
} 
 

 
function readFromStorage() { 
 
    localStorage.locations.forEach(function(location) { 
 
    placeMarker(location); 
 
    }); 
 
} 
 

 
//Funcion to place the marker on the map (flag) 
 
function placeMarker(location) { 
 
    var marker = new google.maps.Marker({ 
 
    position: location, 
 
    icon:'flag.png', 
 
    map: map, 
 
    }); 
 
    //open information window once marker is placed 
 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: 'User has placed warning' 
 
    }); 
 
    infowindow.open(map,marker); 
 

 
    //zoom into the marker 
 
    google.maps.event.addListener(marker,'click',function() { 
 
    map.setZoom(17); 
 
    map.setCenter(marker.getPosition()); 
 
    }); 
 

 
} 
 

 

 
google.maps.event.addDomListener(window, 'load', initialize);

Lassen Sie mich wissen, wenn Sie Probleme haben Verständnis jeder es.