使用 Google Maps API 和 JS 在街景中显示角落的小自上而下地图答案

【问题标题】：Display small top-down map in corner while in Street View using Google Maps API and JS使用 Google Maps API 和 JS 在街景中显示角落的小自上而下地图
【发布时间】：2022-12-09 07:41:00
【问题描述】：

我正在使用 Maps.GoogleAPIs 在我的网页上显示地图，我想在街景视图中启用小角地图视图。这可能更多的是不知道如何用谷歌搜索来找到解决方案的问题。

查看我控制地图的 JS，最接近我可以添加选项来控制它的地方是我拥有的地方：

_map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(lt, ln),
    zoom: 16,
});

下面显示了我想要启用的角贴图示例。

【问题讨论】：

标签： javascript google-maps blazor

【解决方案1】：

你可以做的就是创建两个divs。一张用于全景图，一张用于地图。

我在 documentation 上找到了一个并排示例，它有 <div id="pano"> 和 <div id="map">。

我刚刚通过将 <div id="map"> 放在 <div id="pano> 中来修改文档中的示例，如下所示：

<div id="pano">
    <div id="map"></div>
</div>

然后通过如下设置修改#map的CSS：

#map {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 200px;
  height: 200px;
  z-index: 10;
}

z-index 使它能够出现在街景的顶部，而其他设置几乎使它保持在街景的左下角。然后我刚刚添加了 mapTypeControl: false, 和 zoomControl: true 以某种方式复制您显示的照片。

参考：https://developers.google.com/maps/documentation/javascript/controls

这是显示您想要的实现的代码 sn-p：

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14,
        mapTypeControl: false,
    zoomControl: true
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    }
  );

  map.setStreetView(panorama);
}

window.initialize = initialize;

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

#pano {
  height: 100%;
  width: 100%;
}

#map {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 150px;
    height: 150px;
    z-index: 10;
}

<html>
  <head>
    <title>Street View with map inside</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    
    <div id="pano">
        <div id="map"></div>
    </div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>

希望这可以帮助！

【讨论】：