javascript - 从图像创建自己的 map 并添加图钉

Question

我正在寻找创建自己的 map 的最佳解决方案。我下面有这张图片，我希望能够创建某种 map ，您可以在其中滚动并放大它。如果可能的话，我还希望能够在位置上拖动图钉。是否可以在谷歌地图中执行此操作，或者我是否正在寻找其他解决方案来执行此操作？我确实知道当使用这么小的图像时，缩放时它会变得像素化，但我怎样才能实现这样的效果？

Answer 1

一种选择是将您的图像用作 Ground Overlay ，参见example in the documentation

代码片段:

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 40.740, lng: -74.18}
  });
  var marker = new google.maps.Marker({
   position: map.getCenter(),
   map: map
  });
  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      '/image/0mgx2.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}
google.maps.event.addDomListener(window, "load", initMap);

html, body {
  height:100%;
  width: 100%;
}
#mapContainer {
  height: 100%;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5%;
  margin-top: 2.5%;
}

#map {
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapContainer">
  <div id="map"></div>
</div>