如何在Google Maps JS API中将地图卫星切换按钮移至右上角

没问题！要把Google Maps左上角的地图/卫星切换按钮移到右上角，你只需要通过Google Maps JavaScript API的配置项指定控件位置就行，具体操作如下：

步骤说明 #

• 在你的initMap函数里，创建地图实例时添加mapTypeControlOptions配置，将控件位置设为右上角的预设常量google.maps.ControlPosition.TOP_RIGHT。
• 显式设置mapTypeControl: true（默认已开启，但声明后更稳妥，避免因默认配置变更导致控件隐藏）。

完整示例代码 #

<h3>My Google Maps Demo</h3>
<!-- 给地图容器添加基础样式，确保正常显示 -->
<div id="map" style="height: 400px; width: 100%;"></div>

<script>
function initMap() {
  // 初始化地图实例
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 }, // 示例坐标，可替换为你需要的位置
    zoom: 8,
    // 配置图层切换控件
    mapTypeControl: true,
    mapTypeControlOptions: {
      position: google.maps.ControlPosition.TOP_RIGHT
    }
  });
}
</script>

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

额外提示 #

如果你的地图已有其他初始化配置，只需要把mapTypeControl和mapTypeControlOptions这两项添加到MapOptions对象中即可。Google Maps还提供了其他控件位置常量（比如BOTTOM_RIGHT、LEFT_TOP等），你可以根据需求灵活调整。

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