Google Maps地理定位在form标签页面自动刷新后失效如何解决？

数据老陈

2026-10-6

问题根因

两个版本HTML的核心差异是异常版本将地图相关DOM嵌套在了<form>标签内：你动态创建的定位按钮未指定type属性，浏览器会默认将表单内的无type按钮识别为提交按钮，点击时会触发表单提交行为导致页面自动刷新，定位逻辑还未执行完成页面就重载，因此功能失效。

修复方案

你可以任选以下任意一种方案修改即可：

方案1：给动态生成的按钮指定type为button

修改JS里创建按钮的逻辑，明确设置按钮type，避免被识别为提交按钮：

const locationButton = document.createElement("button");
// 新增这一行
locationButton.type = "button";
locationButton.textContent = "Pan to Current Location";
locationButton.classList.add("custom-map-control-button");

方案2：阻止按钮点击的默认提交行为

给按钮的点击事件回调里加上阻止默认行为的逻辑：

locationButton.addEventListener("click", (e) => {
  // 新增这一行阻止默认提交
  e.preventDefault();
  // 原有定位逻辑保持不变
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
        
        infoWindow.setPosition(pos);
        infoWindow.setContent("Location found.");
        infoWindow.open(map);
        map.setCenter(pos);
      },
      () => {
        handleLocationError(true, infoWindow, map.getCenter());
      }
    );
  } else {
    handleLocationError(false, infoWindow, map.getCenter());
  }
});