谷歌地图 API 使用缩放级别和中心 position 从本地存储值调整 map 页面加载

Question

我正在使用 WordPress/jQuery/Google 地图设置向用户显示列表的 map。

jQuery.goMap.map代码用于加载 WordPress 插件上使用的 Google 地图实例。

我编写了以下函数来使用本地存储存储和加载纬度、经度和缩放级别。 lat/lng 和缩放级别的存储工作正常，缩放级别的加载工作正常，但我无法让 map 以加载的纬度和经度 position 为中心。

我试过使用bounds.extend(latLng); 和jQuery.goMap.map.fitBounds(bounds); 在loadUserZoom function 中，但结果是 map 完全放大。 这意味着存储的缩放级别值将被忽略。

当前运行的代码可以在这里测试。

header 导航中的 Clear text 链接可用于从浏览器中清除本地存储值。 这是为了测试目的而实现的。

非常感谢任何帮助。

Function：storeUserZoom

function storeUserZoom() {
  let zoom = jQuery.goMap.map.getZoom();
  localStorage.setItem( 'zoom', zoom);
  let center = jQuery.goMap.map.getCenter();
  let lat = center.lat();
  let lng = center.lng();
  let latLng = {
    lat: lat,
    lng: lng
  }
  localStorage.setItem( 'latLng', JSON.stringify(latLng));
}

Function：loadUserZoom

function loadUserZoom() {
  if (localStorage.getItem( 'zoom' )) {
    let zoom = parseInt(localStorage.getItem( 'zoom' ));
    console.log(zoom);
    // Logs correct zoom level
    let latLng = JSON.parse(localStorage.getItem( 'latLng' ));
    console.log(latLng);
    // Logs Object { lat: 51.69124213478852, lng: -113.2478200914128 }
    jQuery.goMap.map.setZoom(zoom);
    jQuery.goMap.map.setCenter(latLng);
    // latLng used is incorrect
  }
}

Answer 1

我相信我已经通过调整loadUserZoom function 在initMap function 中的执行方式来解决这个问题。

当 map 空闲时， loadUserZoom function 被包装在 Google Maps 的一次监听事件监听器中。 代码包含在下面。

google.maps.event.addListenerOnce(jQuery.goMap.map, 'idle', function() {
  loadUserZoom();
});

我最初将其设置为addListener ，这似乎与所需的功能相冲突。 我认为这意味着只要 map 处于空闲 state 中，它就会定期执行。

我更新的loadUserZoom function 包含在下面。

function loadUserZoom() {
  if (localStorage.getItem( 'zoom' )) {
    let zoom = parseInt(localStorage.getItem( 'zoom' ));
    let latLng = JSON.parse(localStorage.getItem( 'latLng' ));
    jQuery.goMap.map.setZoom(zoom);
    jQuery.goMap.map.setCenter(latLng);
  }
}