繪製谷歌地圖與本地存儲

Question

我已經創建了一個應用程序，允許用戶在點擊事件後在谷歌地圖上繪製一個標誌，但是一旦刷新頁面，所有的標誌都會丟失。我希望能夠保持用戶使用本地存儲輸入的數據，任何人都可以指向我的方向或向我展示如何處理這個問題的示例代碼？謝謝。

基本谷歌地圖沒有本地存儲代碼

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

這應該做的伎倆;）

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

讓我知道，如果您有任何理解的任何麻煩它。