Question

我正在尝试将一个简单的HTML片段添加到放置在位置标记附近的Google地图中，但是没有找到一个很好的示例或文档来帮助我。我看了这个文档： https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple 它接近我的期望，但我需要一些自定义样式，改变位置，隐藏箭头，以及类似的东西......

这里是gmap代码：

var gps = {lat: 48.2494324, lng: 16.3417493}
function initMap() {
    var map = new google.maps.Map(document.getElementById('gmap'), {
        center: gps,
        zoom: 15
    });
    var marker = new google.maps.Marker({
        position: gps,
        map: map
    });
};

任何提示？ infowindow可能吗？我还没有找到另一种“简单”的方式吗？我会感谢一些示例代码，但提示也没关系，谢谢。

Answer 1

您是否考虑过在一个div中设置两个div并设置z-index和位置css设置？

.container
{
  position: relative;
  z-index:0;
}

.container .google-map-container
{
  position: relative;
  z-index: 1;  
  width: 100%; /* Might not be required depending on google map element */
}

.container .snippet
{
  /* important */
  position: absolute;
  left: 5px;
  top: 5px;  
  width: 30%;
  height: 150px;
  z-index: 15;
  display: block; /* might get away without this */
  
  /* style */
  background: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
}

<div class="container">
  <div class="google-map-container">
    <!-- Google map element goes here -->
  </div>
  <div class="snippet">
    <h3>Info title</h3>
    <p>Lorem ipsum info text</p>
  </div>
</div>

如何将HTML添加到Google地图作为叠加

1 个答案: