css - 如何将多个交互式 DIV 添加到 Google Map - 将鼠标悬停在上面时会改变大小

Question

我有一张 Google map ，上面附有多个标记到物理位置。

我不想使用标准 map 标记，而是使用在鼠标悬停时展开自定义内容的圆圈。

JSFiddle 上的模型示例:https://jsfiddle.net/BaronGrivet/b52bdyt4/

<div class="expanding-marker marker-1">
    <img src="https://picsum.photos/200/100?0" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
 </div>

.expanding-marker {
  border: red 5px solid;
  border-radius: 25px;
  overflow: hidden;
  height: 0px;
  width: 0px;
  margin: 0;
  position: absolute;
  transition: 2s all;
  z-index: 0;
  background-color: #fff;
}

.expanding-marker:hover {
  margin-left: -100px;
  margin-top: -100px;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  z-index: 9;
}

在 Google map 中执行此操作的最佳方法是什么？我查看了标记和叠加层，但仍不确定哪种效果最好。

Answer 1

一个选择是使用 RichMarker library ，将 DOM 元素放入标记中:

marker = new RichMarker({
  position: map.getCenter(),
  map: map,
  draggable: true,
  content: document.getElementById('mrkr1')
});
marker2 = new RichMarker({
  position: new google.maps.LatLng(37.3860517, -122.0838511),
  map: map,
  draggable: true,
  content: document.getElementById('mrkr2')
});

proof of concept fiddle

function initMap() {
  var lng;
  var lat;
  var my_loc = new google.maps.LatLng(37.4419, -122.1419);
  map = new google.maps.Map(document.getElementById('map'), {
    center: my_loc,
    zoom: 10
  });
  marker = new RichMarker({
    position: map.getCenter(),
    map: map,
    draggable: true,
    content: document.getElementById('mrkr1')
  });
  marker2 = new RichMarker({
    position: new google.maps.LatLng(37.3860517, -122.0838511),
    map: map,
    draggable: true,
    content: document.getElementById('mrkr2')
  });
  /* 
  var div = document.createElement('DIV');
    div.innerHTML = '<div class="my-other-marker">I am flat marker!</div>';

    marker3 = new RichMarker({
      map: map,
      position: map.getCenter(),
      draggable: true,
      flat: true,
      anchor: RichMarkerPosition.MIDDLE,
      content: div
    });
  */
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.container {}

.expanding-marker {
  border: red 5px solid;
  border-radius: 25px;
  overflow: hidden;
  height: 0px;
  width: 0px;
  margin: 0;
  position: absolute;
  transition: 2s all;
  z-index: 0;
  background-color: #fff;
}

.expanding-marker:hover {
  margin-left: -100px;
  margin-top: -100px;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  z-index: 9;
}

.expanding-marker p {
  margin: 10px;
}

.marker-1 {
  left: 0px;
  top: 0px;
}

.marker-2 {
  left: 0px;
  top: 0px;
}

.my-other-marker {
  background: blue;
  border: 2px solid #fff;
  padding: 3px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script>
<div id="map"></div>
<div class="container">
  <div id="mrkr1" class="expanding-marker marker-1">
    <img src="https://picsum.photos/200/100?0" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>

  <div id="mrkr2" class="expanding-marker marker-2">
    <img src="https://picsum.photos/200/100?1" />
    <p>
      Sed vitae pretium justo. Nulla venenatis pretium dui ut placerat.
    </p>
  </div>

  <div class="expanding-marker marker-3">
    <img src="https://picsum.photos/200/100?2" />
    <p>
      Quisque hendrerit, risus vitae ullamcorper consectetur, sapien magna sodales sem,
    </p>
  </div>

</div>