Yerel depolama alanıyla google haritalarının çizilmesi

Question

Bir sayfanın tüm yenilenmesiyle birlikte, bayrakların kaybolması durumunda bile kullanıcının bir tıklama olayıyla google haritalarında bir bayrak çizmesini sağlayan bir uygulama oluşturdum. Kullanıcının yerel depolamayı kullanarak veriyi saklayabilmesini istiyorum, herhangi biri bana bir yöne işaret edebilir mi veya örnek problemi nasıl çözeceklerini örnek koduna gösterebilir mi? Teşekkürler. Yerel depolama olmadan

Temel google haritalar kod

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

Bu hile yapmak gerekir;)

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

Eğer herhangi anlamakta herhangi bir sorun olursa bize bildirin o.