從圖像創建自己的地圖並添加管腳

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>