如何在不使用 cookie 谷歌地理编码器 API 的情况下存储用户选择的缩放以供将来的会话使用

Question

使用 Google geocoder api 的第 v.3 版，其中包含 Java 后端、Velocity 前端和 Oracle db。

我们当前的规范指定，当用户选择标记(纬度/液化(时，也应保存其缩放以备将来使用。我一辈子都想不通该怎么做。我已经看到了一些关于边界的信息，我认为我可以用一种黑客的方式使用，但我不想定义地图的边界，我只想保存缩放(如纬度/液化天然气(并能够将其传递到后端。

地图.js

var geocoder;
var map;
var siteLocation;
var marker;
function initMap() {
  var lat = parseFloat($("#newLat").val());
  var lng = parseFloat($("#newLng").val());
  geocoder = new google.maps.Geocoder();
  siteLocation = { lat: lat, lng: lng };
  map = new google.maps.Map(document.getElementById('map'),
    {
      center: siteLocation,
      zoom: 19,
    }
  );
  //set crosshair
  console.log('setting waypoint marker');
  crosshair = new google.maps.Marker(
    {
      position: siteLocation,
      map: map,
      draggable: false,
      shape: { coords: [0, 0, 0, 0], type: 'rect' },
      icon: "https://www.daftlogic.com/images/cross-hairs.gif"
    }
  );

  crosshair.bindTo('position', map, 'center');
  geocodeLatLng();
}
//use new selection to 
function geocodeLatLng() {
  var lat = crosshair.getPosition().lat();
  var lng = crosshair.getPosition().lng();
  var newLocation = crosshair.getPosition();
  geocoder.geocode({ location : crosshair.position}, function(results, status) {
    if (status == 'OK') {
      results[0].geometry.location.lat();
      results[0].geometry.location.lng();
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
//get new user selected map options, [drop marker] (optional)
$("#addGeolocation").on("click", function (evt) {
  geocodeLatLng();
  evt.preventDefault();
  var newZoom = map.getZoom();
  var newLat = crosshair.getPosition().lat();
  var newLng = crosshair.getPosition().lng();
  $("#newLat").val(newLat);
  $("#newLng").val(newLng);
  newLocation = new google.maps.LatLng(newLat, newLng);
  map.setCenter(newLocation);
  map.setZoom(newZoom);
  //make sure no marker exists
  if ( marker !== undefined) {
      marker.setPosition(newLocation);
    } else {
      marker = new google.maps.Marker({
          position: newLocation,
          map: map,
          draggable: true
      });
    }
});

---

速度宏

---

#macro(map $ADDRESS)
    <script  defer
    src="https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&callback=initMap">
    </script>
    <div id="map"></div>
    <span class="innerBlock smallBlock" id="map" ></span>
    <button type="button" onclick="geocodeLatLng()" id="addGeolocation"> $BTN_ADD_GEOLOCATION</button>
    #inp_hidden("newLat" "$context.getSite().getLatitude()")
    #inp_hidden("newLng" "$context.getSite().getLongitude()")
    #inp_hidden("newZoom")
#end

我完全被难住了。有什么想法吗？我看到的大多数解决方案都涉及cookie，但我们不能使用这些解决方案。任何建议将不胜感激。谢谢！

Answer 1

我想

我明白你的意思，但如果我错了，请纠正我。

您可以将缩放级别保存在变量中。

var zoom = 16;

然后将其保存在本地存储中

localStorage.setItem("zoomLevel", zoom);

然后使用 getItem 方法检索它

var savedZoom = localStorage.getItem("zoomLevel");

因此，如果您计划在选择框中设置缩放级别或其他内容，则可以将用户选择保存到本地存储中，然后在他们返回时通过设置为缩放到"savedZoom"来检索它。

我不完全确定这是否是你所追求的，但希望它有所帮助。我尽量不详细介绍，以防万一不是。