Question

我们有一个输入字段，并使用此模板在弹出窗口中提交：

<input type="text" size="50" placeholder="Your adventure is waiting!" id="mapitplace" /> 
<input type="submit" value="Map It!" id="mapitsubmit"/>

和JS：

function MapItUp() {
  var mapitplace = new google.maps.places.Autocomplete(document.getElementById('mapitplace'));
  localStorage.mapitupp = mapitplace;
  jQuery('#mapitsubmit').click(function(){
  location.href = "http://roadtripsharing.com/map-it";
  });
  return false;
}

举个例子，你可以点击＆＃34; Map It！＆＃34;在roadtripsharing.com的方向盘上显示弹出窗口，在文本输入中键入一个位置并单击绿色Map It！按钮。该按钮用

打开新位置/地图

<div id="mapitmap"></div>

和

function initMapIt() {
    var mapit = new google.maps.Map(document.getElementById('mapitmap'), {
      center: {lat: 39, lng: -105},
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    if (localStorage.mapitupp !== null){
      var mapitupp = localStorage.mapitupp;
      var mapittupp = mapitupp.getplace();  
      if (mapittupp.geometry.viewport) {
        mapit.fitBounds(mapittupp.geometry.viewport);
      }
      else {
        mapit.setCenter(mapittupp.geometry.location);
        mapit.setZoom(17);  
      }
    console.log(mapittupp);
    }
}

initMapIt正在加载，如缩放3处的地图渲染所示。没有看到mapitupp的控制台日志或正在传递的任何证据。

/ map-it上有一个控制台错误：

（index）：1102 Uncaught ReferenceError：mapitupp未定义

代替mapittupp = localStorage.mapitupp.getplace（）; for mapittupp = mapitupp.getplace（）;给出控制台错误（也在/ map-it上）：

（index）：1102 Uncaught TypeError：localStorage.mapitupp.getplace不是函数

我已经阅读了关于JSON字符串化和解析的问题，但我试图传递一个字符串（mapitupp或localStorage.mapitupp不确定正确的说法，但它应该具有值文本字段#mapitplace。

您是否可以帮助在第一页上的localstorage中保存变量mapitupp然后检索它以转换为位置对象并使其成为#mapitmap中打开的新地图的中心？

Answer 1

根据此localStorage.mapitupp = mapitplace.getPlace();，localStorage值应为string。

那么你怎么能像if (localStorage.mapitupp){一样使用它呢？要像使用localStorage.mapitupp那样使用它，必须是True/False值。所以你的问题就在那个地方。

Answer 2

尝试通过localStorage传递一个位置对象是不行的。我的解决方案是改为传递place_id字符串。

function MapItUp() {
  var mapitplace = new google.maps.places.Autocomplete(document.getElementById('mapitplace'));
jQuery('#mapitsubmit').click(function(){
var mappitplace = mapitplace.getPlace();
var placetopass = mappitplace.place_id;
localStorage.setItem('placetopass', placetopass);
location.href = "http://roadtripsharing.com/map-it";
}); 
return false;
}

并获取并在地图中使用：

function initMapIt() {    
  var mapit = new google.maps.Map(document.getElementById('mapitmap'), {
    center: {lat: 39, lng: -105},
    zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});  
  if (localStorage.placetopass !== null){
    var rtsgeocoder = new google.maps.Geocoder;
    var rtsinfowindow = new google.maps.InfoWindow;
    var newplace = localStorage.getItem('placetopass');
    rtsgeocoder.geocode({'placeId': newplace}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
  if (results[0]) {
    mapit.setZoom(11);
    mapit.setCenter(results[0].geometry.location);
    var rtsmarker = new google.maps.Marker({
      map: mapit,
      position: results[0].geometry.location
    });
    rtsinfowindow.setContent(results[0].formatted_address+'<p>Yeah, buddy!</p>');
    rtsinfowindow.open(mapit, rtsmarker);
  } else {
    window.alert('No results found');
  }
} else {
  window.alert('Geocoder failed due to: ' + status);
}
});
}
else {

}
}

在新窗口中将Google地图的localStorage作为地图中心传递

2 个答案: