javascript - 自定义文本更接近谷歌地图 api 中的固定位置？

Question

我的谷歌地图代码:

<div class="contact-map fullwidth">
    <iframe id="contacts-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2934.840706379279!2d23.333396514681272!3d42.643536825146064!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40aa84104363e1bf%3A0x52c1ac43c6be263a!2z0YPQuy4g4oCe0J_RitGB0YLRitGAINGB0LLRj9GC4oCcIDExLCAxNzAwINC60LIuINCS0LjRgtC-0YjQsCwg0KHQvtGE0LjRjw!5e0!3m2!1sbg!2sbg!4v1502701860622" frameborder="0" allowfullscreen></iframe>
</div>

这是 map 的外观，我想在箭头上张贴一些带有文本的标签？还是别针周围有其他东西？

Answer 1

您不能使用 Google Maps Embed API 来做到这一点。但是您可以使用 Google Maps JavaScript API 放置自定义工具提示窗口，如下所示。

<div id="container">
  <style>
    #map {
      height: 100%;
    }
    
    body,
    html,
    #container {
      height: 100%;
    }
  </style>

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

  <script>
    function initMap() {

      //Location
      var address = {
        lat: 40.730,
        lng: -73.935
      };
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 18,
        center: address
      });

      //Your custom label content
      var contentString =
        '<div>' +
        '   <h1>Title</h1>' +
        '   <p>This is your custom description and you can type anything here.</p>' +
        '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      var marker = new google.maps.Marker({
        position: address,
        map: map,
        title: 'My Place'
      });

      marker.addListener('click', function() {
        infowindow.open(map, marker);
      });

      //Open overlay by default
      infowindow.open(map, marker);

    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
  </script>
</div>