Ubuntu系统Firefox中Google Maps多边形加载后不可见问题求助

问题现象 #

• 在Ubuntu系统的Firefox浏览器中使用Google Maps JS API v3添加多边形时，多边形实际存在（鼠标悬停时光标会变化）但初始不可见
• 拖拽多边形后会立即显示，调整地图缩放级别后又变回不可见
• 多次点击加载按钮添加多个多边形时，首个多边形不可见，后续添加的会让所有多边形显示，但缩放后全部恢复不可见（仍可拖拽）
• 需求：让多边形始终可见，除非主动隐藏或删除

问题代码 #

HTML代码 #

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<header>
  <h1>Google Maps<br />polygon test</h1>
  
  <div>
    <div>Bermuda triangle</div>
    <button id="btn1">Load basic polygon</button>
  </div>
  
  <div>
    <div>New Mexico; arbitrary</div> 
    <button id="btn2">Load geojson polygon</button>
  </div>
</header>

<div id="map1"></div>

CSS代码 #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  align-items: center;
  gap: 4em;
  padding: 1px;
}

header div {
  
}

h1 {
font-size: 1em;
}

button {
  font-size: 1rem;
  padding: 1px;
}

#map1 {
  flex: 1;
}

JavaScript代码 #

var map = new google.maps.Map(document.getElementById("map1"), {
  mapId: 'DEMO_MAP_ID',
  center: { lat: 24.3366734, lng: -75.2085759 },
  zoom: 5.25,
  gestureHandling: 'greedy'
})

const btn1 = document.getElementById("btn1")
const btn2 = document.getElementById("btn2")

btn1.addEventListener("click", () => loadPolygon_Basic())
btn2.addEventListener("click", () => loadPolygon_GeoJSON())

function loadPolygon_Basic() {
  
  const shape_basic = new google.maps.Polygon({
    paths: [
      { lat: 25.774, lng: -80.19 },
      { lat: 18.466, lng: -66.118 },
      { lat: 32.321, lng: -64.757 },
      { lat: 25.774, lng: -80.19 }
    ],
    strokeColor: "red",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "lime",
    fillOpacity: 1, 
    visible: true,
    clickable: true,
    draggable: true,
  })
  
  map.setCenter({ lat: 24.3366734, lng: -75.2085759 })
  map.setZoom(5.25)

  shape_basic.setMap(map)
}

function loadPolygon_GeoJSON() {

  const shape_geojson = {
    "type":"Feature",
    "geometry":{
      "type":"Polygon",
      "coordinates":[[[-101.69092517560932,35.760800520027736],[-101.69195514387104,35.73391165725278],[-101.6404567307851,35.73377231306736],[-101.64406161970112,35.764004286494796],[-101.69092517560932,35.760800520027736]]]
    },
    "properties":{}
  }
  
  map.setCenter({ lat: 35.7697449, lng: -101.6806657 })
  map.setZoom(12)
  map.data.addGeoJson(shape_geojson)

  map.data.setStyle({
    fillColor: "green",
    strokeWeight: 1,
    clickable: true,
    draggable: true,
  })
}

解决方案 #

方案1：移除/替换无效的mapId #

问题根源在于使用了谷歌官方的演示mapId: 'DEMO_MAP_ID'，该ID并非绑定到个人谷歌云项目的有效地图ID，在Firefox环境下会导致多边形渲染异常。

修改地图初始化代码，移除mapId参数，或者替换为你自己谷歌云项目中创建的有效地图ID：

var map = new google.maps.Map(document.getElementById("map1"), {
  // 移除DEMO_MAP_ID，或替换为你的有效地图ID
  center: { lat: 24.3366734, lng: -75.2085759 },
  zoom: 5.25,
  gestureHandling: 'greedy'
})

方案2：手动触发地图渲染刷新 #

如果必须保留mapId，可以在添加多边形后手动触发地图的渲染更新，强制多边形显示：

• 对于基础多边形，在shape_basic.setMap(map)后添加：

google.maps.event.trigger(map, 'resize');
// 或者重新设置一次缩放，触发重绘
map.setZoom(map.getZoom());

• 对于GeoJSON多边形，在map.data.addGeoJson(shape_geojson)后添加同样的触发代码。

验证效果 #

修改后，多边形会在添加后立即显示，缩放地图也不会消失，拖拽功能正常。

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