使用本地存储绘制Google地图

Question

我创建了一个应用程序，该应用程序允许用户在单击事件时在google地图上绘制标记，尽管刷新页面后所有标记都会丢失。 我希望能够保留用户使用本地存储输入的数据，任何人都可以向我指明方向或向我展示他们如何处理此问题的示例代码？ 谢谢。

没有本地存储的基本Google Maps代码

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

让我知道您是否有任何困难。

Answer 2

var map = {};
var polyOptions = {};

$（document）.ready（function（）{

map = new google.maps.Map（document.getElementById（'MapDiagram'），{缩放：5.4，中心：new google.maps.LatLng（40，-10），mapTypeId：google.maps.MapTypeId.ROADMAP，zoomControl： true}）; polyOptions = {strokeWeight：0，fillOpacity：0.45，可编辑：true}； }）;

map.setCenter（new google.maps.LatLng（coord1，coord2））;