偏移Google Map并固定标记：实现分屏布局下的坐标获取需求

嘿，我来帮你搞定这个需求！核心思路是用固定DOM元素做标记（而非Google Maps自带的Marker），让它始终停留在左半部分地图容器的中心，然后通过地图的投影方法把标记的像素位置转换成对应的经纬度，具体步骤如下：

1. 调整布局与样式 #

首先创建左右分栏的结构，左栏放地图，右栏放表单，同时给固定标记添加样式：

<div class="page-container">
  <!-- 左半部分：地图容器 -->
  <div id="map" class="map-wrapper"></div>
  <!-- 右半部分：表单容器 -->
  <div class="form-wrapper">
    <label>纬度：<input type="text" id="default_latitude" readonly></label>
    <label>经度：<input type="text" id="default_longitude" readonly></label>
    <!-- 其他表单元素可以加在这里 -->
  </div>
</div>

对应的CSS：

.page-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.map-wrapper {
  width: 50%;
  height: 100%;
  position: relative; /* 为固定标记提供定位参考 */
}
.form-wrapper {
  width: 50%;
  padding: 2rem;
  box-sizing: border-box;
  background: #f5f5f5;
}
/* 自定义固定标记：始终在地图容器中心 */
.fixed-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff4444;
  border: 3px solid #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  pointer-events: none; /* 避免干扰地图拖拽、缩放操作 */
}

2. 修改JavaScript逻辑 #

不再把标记绑定到地图中心，而是通过地图的投影API计算固定像素位置对应的经纬度：

var map = null;
var fixedMarker; // 存储自定义标记的DOM元素

// 地理定位相关逻辑（保留你的原有代码）
function showlocation() {
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(callback, error);
  } else {
    console.warn("geolocation IS NOT available");
  }
}

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

function callback(position) {
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  document.getElementById('default_latitude').value = lat.toFixed(6);
  document.getElementById('default_longitude').value = lon.toFixed(6);
  var latLong = new google.maps.LatLng(lat, lon);
  map.setZoom(16);
  map.setCenter(latLong);
}

function initAutocomplete() {
  var mapOptions = {
    center: new google.maps.LatLng(42.4405026181028, 19.24323633505709),
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
  // 创建并添加固定标记到地图容器
  fixedMarker = document.createElement('div');
  fixedMarker.className = 'fixed-marker';
  document.getElementById('map').appendChild(fixedMarker);
  
  // 核心函数：计算标记位置对应的经纬度
  function updateMarkerCoords() {
    const mapContainer = document.getElementById('map');
    // 获取地图容器中心的像素坐标
    const centerPixel = new google.maps.Point(
      mapContainer.offsetWidth / 2,
      mapContainer.offsetHeight / 2
    );
    // 将像素坐标转换为经纬度
    const markerLatLng = map.getProjection().fromContainerPixelToLatLng(centerPixel);
    
    // 更新表单输入框的数值（保留6位小数更精准）
    document.getElementById('default_latitude').value = markerLatLng.lat().toFixed(6);
    document.getElementById('default_longitude').value = markerLatLng.lng().toFixed(6);
  }
  
  // 监听地图的移动、缩放事件，实时更新经纬度
  google.maps.event.addListener(map, 'center_changed', updateMarkerCoords);
  google.maps.event.addListener(map, 'zoom_changed', updateMarkerCoords);
  
  // 初始化时先执行一次，填充初始坐标
  updateMarkerCoords();
}

// 页面加载完成后初始化地图
google.maps.event.addDomListener(window, 'load', initAutocomplete);

关键说明 #

• 固定标记的实现：用普通DOM元素替代Google Maps的Marker，通过CSS定位固定在地图容器中心，视觉上不会随地图移动而改变位置。
• 经纬度计算：利用map.getProjection().fromContainerPixelToLatLng()方法，把地图容器内的像素坐标转换成对应的地理经纬度，这是实现“视觉偏移中心”坐标获取的核心。
• 事件监听：监听地图的center_changed（地图移动）和zoom_changed（缩放）事件，每次地图状态变化时重新计算坐标，保证表单数值实时更新。

内容的提问来源于stack exchange，提问作者Boris Dabetic