如何放大街景中的地址和后退按钮？

问题描述

我正在扩大 Google 地图的控件大小，因为我的网站服务的是年龄较大的受众，他们非常喜欢更大的用户界面。

设置主要地图控件大小，简单：controlSize: 60,//<-pixels

设置街景尺寸，简单：controlSize: 60,//<-pixels

但是 Streetview.controlSize 对地址框和后退按钮没有任何作用，它们仍然很小。我已经搜索了文档，但 StreetViewAddressControlOptions 中没有任何内容。

我知道我可以进入 CSS 并为这些元素设置 "gm-iv-container gm-iv-small-container" 样式；但是，这违反了 Google 的条款和条件。请让我知道如何在 Javascript 中增加地址和后退按钮的大小。

请看下面我的代码和这张图片，说明后退按钮真的是多么令人沮丧。

Tiny Address & Back Button

街景设置：

        const newStreetView = new window.google.maps.StreetViewPanorama(
          map.getDiv(),{
            addressControlOptions: {position: window.google.maps.ControlPosition.BottOM_CENTER},controlSize: controlSize,enableCloseButton: true,fullscreenControl: false,visible: false,}
        );
        map.setStreetView(newStreetView);

完整代码：

  static createMap(inputType,inputID,inputCenter,inputZoom,onComplete) {
    Maps.init(onValidate => {
      const mapType = inputType ? inputType : "default";
      const mapID = inputID ? inputID : _.uniqueId("prefix-");
      const formattedCenter = Maps.formatPosition(inputCenter);
      const center = formattedCenter ? formattedCenter : {lat: Maps.defaultLat,lng: Maps.defaultLng};
      const zoom = !isNaN(parseFloat(inputZoom)) ? inputZoom : Maps.defaultZoom;
      const controlSize = Math.floor(window.innerHeight * 0.05); // @MAGIC: controlSize set to 0.5vh

      /*====================
      Default Map
      ====================*/
      if(mapType === "default" || mapType === "editor") {
        
        // Create Map Parameters
        const mapParams = {
          center: center,disableDefaultUI: false,mapTypeControlOptions: {position: window.google.maps.ControlPosition.TOP_RIGHT,style: window.google.maps.MapTypeControlStyle.DEFAULT},mapTypeControl: true,scaleControl: true,streetViewControl: true,zoom: zoom,};

        // Do not apply Streetview on the editor Map
        if(mapType === "editor") {
          mapParams.streetViewControl = false;
        }

        // Create the Map
        const map = new window.google.maps.Map(Maps.getMapDiv(mapID),mapParams);

        // Apply Streetview settings on the default Map
        if(mapType === "default") {
          new window.google.maps.event.addListenerOnce(map,'idle',() => {
            const newStreetView = new window.google.maps.StreetViewPanorama(
              map.getDiv(),{
                addressControlOptions: {position: window.google.maps.ControlPosition.BottOM_CENTER},}
            );
            map.setStreetView(newStreetView);
          });
        }
        
        // Create Map Pins
        const overlay = new window.google.maps.OverlayView();
        overlay.draw = function() {
          this.getPanes().markerLayer.id = 'markerLayer';
        } 
        overlay.setMap(map);
        onComplete(map);
      }
    });
  }

解决方法

Maps JS API 当前不支持此功能。我强烈不鼓励使用 CSS 来实现这一点，因为它确实可能违反了他们的 TOS 和，它将基于未记录的类名，这意味着如果 Google 更改，您的解决方案可能随时停止工作类名和/或 HTML 结构。

您可以做的是禁用该控件并创建您自己的 custom control 来替换它，但这可能需要付出代价。

您也可以在他们的 issue tracker 中打开一个新功能请求，并希望并等待（可能很长时间）Google 实施它。如果您这样做，请在功能请求中提供指向此问题的链接，并在问题中提供指向功能请求的链接。