Google Maps API - 自定义控件显示没有样式答案

【问题标题】：Google Maps API - Custom controls shows without stylingGoogle Maps API - 自定义控件显示没有样式
【发布时间】：2021-01-30 05:59:44
【问题描述】：

我正在使用 Google Maps API 在我的混合应用程序上显示地图，例如：http://www.google.com/maps/api/js?key=

它正确显示了地图。我在地图上添加了自定义按钮来处理新选项。自定义按钮在 2020 年 10 月 14 日之前完美显示，没有任何样式问题，例如地图上的其他默认按钮（“MAP / 卫星”）。

但是 2020 年 10 月 15 日 - 按钮显示时没有样式。谷歌是否改变了 api 上的任何内容？我正在使用它的最新版本。

“Sample”是按钮，但它显示时没有任何样式，之前它显示为与其他两个选项一样。

代码：我已经创建了一个 <div> 并在父 div 中为“示例”添加了另一个 <div>，正如谷歌在文档中提到的那样。我没有更改代码上的任何逻辑。

使用下面的代码添加了按钮，它起作用了。但从 10 月 15 日起，它不会显示样式，

   let controlUI = document.createElement('div');
            controlUI.setAttribute('id', 'custommapmenu-wrapper');
            controlUI.style.cssText = 'margin-top: 10px; margin-left: -10px;';
            controlUI.index = 1;
            controlUI.innerHTML = '<div class="gm-style-mtc"> <div role="button" draggable="false" title="Show street map" > Sample</div></div>';

   let mapTypeControlOptions = {
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

      map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlUI, mapTypeControlOptions);

我尝试在 api 点上添加版本，如下所示 http://www.google.com/maps/api/js?key=API_KEY&&v=quarterly 或 http://www.google.com/maps/api/js?key=API_KEY&&v=3.41

它按预期显示按钮。

如果我尝试过没有提及 API 上的任何版本，它认为是每周一次，所以它需要 3.42.9。在 3.42.9 版本中，UI 样式逻辑已更改。它为按钮样式设置“未定义”。

Google MAP API 是否更改了逻辑.. 请确认。

【问题讨论】：

标签： cordova google-maps-api-3 hybrid-mobile-app

【解决方案1】：

Google 似乎改变了他们对按钮的样式（它们没有记录，因此可以随时更改）。

它们现在是 <button> 具有以下样式的元素：

style="background: none padding-box rgb(255, 255, 255); display: table-cell; border: 0px; margin: 0px; padding: 0px 17px; text-transform: none; appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px; vertical-align: middle; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 66px;"

proof of concept fiddle

代码 sn-p：

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8,
  });
  let controlUI = document.createElement('div');
  controlUI.setAttribute('id', 'custommapmenu-wrapper');
  controlUI.style.cssText = 'margin-top: 10px; margin-left: -10px;';
  controlUI.index = 1;
  controlUI.innerHTML = '<div class="gm-style-mtc"> <button draggable="false" title="Show street map" style="background: none padding-box rgb(255, 255, 255); display: table-cell; border: 0px; margin: 0px; padding: 0px 17px; text-transform: none; appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px; vertical-align: middle; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 66px;" > Sample</div></div>';

  let mapTypeControlOptions = {
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_LEFT
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlUI, mapTypeControlOptions);
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

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

</html>

【讨论】：