如何通过单选按钮调用Google Map？附代码实现疑问

我看了你写的代码，这里有几个关键问题需要修正，同时帮你实现点击单选按钮切换对应地点地图的功能，一步步来：

原代码里的核心问题 #

• HTML里不能有重复的id：你写了两个id="map"，浏览器只会识别第一个，所以得给它们不同的id
• 重复定义了myMap函数：同名函数会被覆盖，没法分别初始化两个地图
• Marker的position用了未定义的GIT：得换成对应地点的经纬度坐标
• Google Maps API加载逻辑不对：原代码里直接加载API会自动执行callback，但我们需要按需切换地图

修正后的完整代码 #

<form>
  <input type="radio" name="location" onclick="myFunction(this.value)" value="Belgaum" checked>Belagavi<br>
  <input type="radio" name="location" onclick="myFunction(this.value)" value="Bangalore">Bangalore<br>

  <!-- 两个地图容器，给不同的id，初始隐藏Bangalore的地图 -->
  <div id="map-belgaum" style="width:100%;height:200px;background:yellow;"></div>
  <div id="map-bangalore" style="width:100%;height:200px;background:yellow; display: none;"></div>
</form>

<script>
// 存储各个地点的经纬度，方便快速获取
const locationCoords = {
  Belgaum: { lat: 15.835015, lng: 74.517537 },
  Bangalore: { lat: 12.971599, lng: 77.594566 }
};

// 初始化地图的通用函数，接收地点标识和容器id
function initMap(location, mapId) {
  const coords = locationCoords[location];
  const mapOptions = {
    center: new google.maps.LatLng(coords.lat, coords.lng),
    zoom: 15, // 25的缩放太大了，改成15更合适
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  const map = new google.maps.Map(document.getElementById(mapId), mapOptions);
  // 添加标记
  new google.maps.Marker({
    position: coords,
    map: map,
    title: location
  });
}

// 单选按钮点击后的处理函数
function myFunction(selectedValue) {
  // 先隐藏所有地图容器
  document.getElementById("map-belgaum").style.display = "none";
  document.getElementById("map-bangalore").style.display = "none";

  // 根据选中的值显示对应地图，并且如果地图还没初始化就初始化
  if (selectedValue === "Belgaum") {
    const mapContainer = document.getElementById("map-belgaum");
    mapContainer.style.display = "block";
    // 检查地图是否已经初始化（通过判断容器里是否有Google Map的元素）
    if (!mapContainer.querySelector(".gm-style")) {
      initMap("Belgaum", "map-belgaum");
    }
  } else if (selectedValue === "Bangalore") {
    const mapContainer = document.getElementById("map-bangalore");
    mapContainer.style.display = "block";
    if (!mapContainer.querySelector(".gm-style")) {
      initMap("Bangalore", "map-bangalore");
    }
  }
}

// 页面加载时初始化默认选中的Belgaum地图
window.onload = function() {
  initMap("Belgaum", "map-belgaum");
};
</script>

<!-- 记得替换成你自己的Google Maps API Key -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

关键改动说明 #

1. 唯一的地图容器id：用map-belgaum和map-bangalore区分两个地图，避免冲突
2. 通用初始化函数：initMap可以根据传入的地点参数初始化对应地图，不用写重复代码
3. 点击切换逻辑：myFunction里先隐藏所有地图，再显示选中的那个，同时判断地图是否已经初始化，避免重复创建
4. 修正经纬度和缩放级别：Bangalore用了正确的坐标，把zoom从25改成15（25的缩放级别会导致地图只显示很小的区域）
5. API加载调整：去掉了callback参数，改成页面加载时初始化默认地图，按需切换

记得把代码里的YOUR_API_KEY替换成你自己的Google Maps API密钥哦~

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