为什么实例化Google Maps Places Search会在地图上添加一个丑陋的白色div？

Posted 2021-05-06

为什么创建google.maps.places.PlacesService的实例会在地图的右侧添加半透明的白色div？

请看下图，我在其中突出显示<div>使用Chrome的DevTools添加的PlacesSearch（div出现在我测试过的所有浏览器中，包括Chrome，Firefox和Edge）。在使用javascript调用此行的确切时刻添加此div：

var service = new google.maps.places.PlacesService(map);

以下屏幕截图取自Google自己的文档页面：https://developers.google.com/maps/documentation/javascript/examples/place-search

在撰写本文时，该页面使用的是Google Maps JavaScript API版本3.31.2，但它也出现在我自己的网站上使用版本3.29.14b，所以看起来这个问题现在至少已经出现了几个版本。

您还可以在此处看到它：https://jsfiddle.net/q7788qvp/如果您多次单击“实例化”按钮，您可以看到多个白色半透明div在地图的右侧堆叠起来。

有没有办法阻止这个div添加到地图？

---

答案

有一个open issue (#35828183) in the issue tracker

阻止<div>被添加到map的一种解决方法是将PlacesService构造函数传递给htmlElement而不是map对象。

var service = new google.maps.places.PlacesService(document.getElementById('placediv'));

proof of concept fiddle

代码段：

$(document).ready(function() {
  var map = new google.maps.Map($("#map")[0], {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 17,
    center: new google.maps.LatLng(37.4219006, -122.0847023)
  });

  $("button").on("click", function() {
    var service = new google.maps.places.PlacesService(document.getElementById('placediv'));
  });
});

#map {
  position: absolute;
  left: 0;
  top: 40px;
  right: 0;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>
<div id="placediv"></div>
<button>Instantiate PlacesSearch</button>
<div id="map"></div>

以上是关于为什么实例化Google Maps Places Search会在地图上添加一个丑陋的白色div？的主要内容，如果未能解决你的问题，请参考以下文章

如何从 google.maps.places.Autocomplete 获得超过 5 个结果？

Google Maps Places API - 如何获取地名？ [复制]

在Google Maps android上放置点击监听器

Google Places API 中缺少 Google Maps 中的地点

从 Google Maps Places API 中删除占位符文本

Google Maps Places API 不工作