从图像创建自己的地图并添加图钉

Question

我正在寻找创建自己的地图的最佳解决方案。我有这个图像，我希望能够创建某种地图，你可以滚动它并放大。如果可能的话，我也希望能够在地点上拖动针脚。这可以在谷歌地图中这样做，还是我在寻找其他解决方案来做到这一点？我知道在使用如此小的图像时，它会在缩放时变成像素化，但我怎样才能实现这样的效果呢？

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(
      'http://i.stack.imgur.com/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>