iframe嵌入地图实现多位置标注 保留谷歌地图原生视图效果

双点位原生谷歌地图效果参考

按照以下配置即可实现和原生谷歌地图完全一致的效果，同时保留左上角原生控件、添加两个独立点位：

• 初始化地图时不要添加自定义样式，保留全部原生UI
  初始化Map实例时不要传入styles自定义样式参数，同时保持默认UI开启，禁止手动修改控件位置、显式隐藏控件：

  const map = new google.maps.Map(document.getElementById('map-container'), {
    // 中心坐标后续会自动适配，可先填写临时值
    center: { lat: 39.9, lng: 116.4 },
    zoom: 12,
    // 核心配置：开启所有原生默认控件
    disableDefaultUI: false,
    // 不要额外配置mapTypeControl、zoomControl的位置和显示状态，直接用默认值即可
  })
  

• 添加两个原生点位标记
  直接用官方默认Marker类创建标记，不要自定义图标属性，默认就会使用谷歌原生红色点位图标：

  // 第一个点位
  const markerA = new google.maps.Marker({
    position: { lat: 点位A纬度, lng: 点位A经度 },
    map: map
  })
  // 第二个点位
  const markerB = new google.maps.Marker({
    position: { lat: 点位B纬度, lng: 点位B经度 },
    map: map
  })
  

• 自动适配视野，保证两个点位完整展示
  用LatLngBounds自动计算最佳缩放等级和中心位置，避免手动设置zoom、center导致的视野偏差：

  const bounds = new google.maps.LatLngBounds()
  bounds.extend(markerA.getPosition())
  bounds.extend(markerB.getPosition())
  map.fitBounds(bounds)
  

之前实现效果和原生视图有明显差异，基本都是因为初始化时传入了自定义地图样式、手动修改了默认控件的显隐/位置、自定义了标记图标导致的，把这些自定义配置全部移除，使用默认参数即可和原生谷歌地图效果完全一致，左上角的地图类型切换、缩放控件也会默认保留，不需要额外开发。

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