如何使用Api v3在Google Map上放置圖像？

我有一個房子的簡單圖像（頂視圖，看起來像一個3D模型），我想把這張房子的照片放在這個房子所在的地方（在路線圖上）。 This is an example of what I want。但是我有一個很大的位置問題，我無法正確放置圖像，它被撕裂或開走（an example of what I got）。我讀過關於疊加層的所有文檔，但我不知道如何製作這個東西，也許有人告訴我如何去做或者顯示出去的方向？代碼如何使用Api v3在Google Map上放置圖像？

例子：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Ground Overlays</title> 
<style> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 

var Overlay; 

function initialize() { 

var house = new google.maps.LatLng(55.734907, 37.571526); 
var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(55.734603,37.571374), 
    new google.maps.LatLng(55.734944,37.572097), 
    new google.maps.LatLng(55.735032,37.571221), 
    new google.maps.LatLng(55.735201,37.570343), 
    new google.maps.LatLng(55.735218,37.570840), 
    new google.maps.LatLng(55.735238,37.571670), 
    new google.maps.LatLng(55.735423,37.571147), 
    new google.maps.LatLng(55.735551,37.570891) 
); 

var mapOptions = { 
zoom: 17, 
center: house, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

Overlay = new google.maps.GroundOverlay(
    'file:///home/map_top.png', 
    imageBounds); 
Overlay.setMap(map); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
</body> 
</html>

來源

2013-11-20 user2596615

問題可能是你的界限。只使用矩形的SouthWest和NorthEst角的兩個點。 'LatLngBounds（sw？：LatLng，ne？：LatLng）' 嘗試改變其中一個點（sw），直到您到達正確的位置。 – sabotero

好的，謝謝你的回答，但有什麼不同的方法來達到我想要的？可能是這些讓這種有趣的東西（第一個例子）使用另一種方法的人？ – user2596615

您可以上傳圖片_map_top.png_來嘗試一下 – sabotero

錨位於沿「邊界」的底部的中心點（圖）（你可以看到，here, Icon being an overlay too like GroundOverlay您可以安全地推斷，這也適用到地面疊加層。

因此您的邊界必須被計算在內。

此外，對於google.maps.LatLngBounds構造函數僅取2分。在你的情況下，TW o第一點：

new google.maps.LatLng(55.734603,37.571374) 
new google.maps.LatLng(55.734944,37.572097)

如果您傳遞更多的分數，他們將被忽略。

請注意，格式爲google.maps的座標採用的格式爲DD.mmmmmm，所以點之後的部分爲米（如果我的記憶不讓我失望）。因此，如果您的圖片規模很大，您可以輕鬆計算您的定位點。

在下面的例子中，我使用了你的兩個第一點。爲了得到它的工作：

複製所有的代碼在一個.html文件
更改圖片的路徑。
運行該頁面。

然後，您可以移動到右側和左側您的圖像來演示我在說什麼。

---編輯的代碼：添加功能，使圖像更小/大---------

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
     <meta charset="utf-8"> 
     <title>Ground Overlays</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    </head> 
    <body> 
     <div> 
      <input type="text" id="step" value="100" /> 
      <button id="left">Left</button> 
      <button id="right">Right</button> 
      <button id="smaller">Smaller</button> 
      <button id="bigger">Bigger</button> 
      <label id="lng0">0</label> 
      <label id="lng1">1</label> 
     </div> 
     <div id="map-canvas"></div> 
     <script> 

      var stepPresition = 1000000.0; 
      var Overlay; 
      var markers = []; 
      var map; 
      var coordinates = [{ lat: 55.734603, lng: 37.571374 }, { lat: 55.734944, lng: 37.572097 }]; 
      var points; 


      function initialize() { 

       var house = new google.maps.LatLng(55.734907, 37.571526); 

       var mapOptions = { 
        zoom: 17, 
        center: house, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

       AddOverlay(); 
       SetLabels(); 
      } 

      function RemoveMarkers() { 

       for (var i = 0; i < markers.length; i++) { 
        markers[i].setMap(null); 
       } 
       markers = []; 
      } 

      function AddOverlay() { 

       points = [new google.maps.LatLng(coordinates[0].lat, coordinates[0].lng), 
          new google.maps.LatLng(coordinates[1].lat, coordinates[1].lng)]; 

       for (var i = 0; i < points.length; i++) { 
        markers.push(new google.maps.Marker({ position: points[i], map: map, title: "Marker " + i })); 
       } 

       var imageBounds = new google.maps.LatLngBounds(points[0], points[1]); 

       Overlay = new google.maps.GroundOverlay('Content/images/map_top.png', imageBounds); 
       Overlay.setMap(map); 
      } 
      function RemoveOverlay() { 
       Overlay.setMap(null); 
       Overlay = null; 
      } 

      function MoveTo(step) { 
       for (var i = 0; i < coordinates.length; i++) { 
        coordinates[i].lng = coordinates[i].lng + step; 
       } 
       RemoveMarkers(); 
       RemoveOverlay(); 
       AddOverlay(); 
       SetLabels(); 
      } 
      function MoveToLeft() { 
       var step = parseFloat($("#step").val()/stepPresition); 
       MoveTo((-1) * step); 
      } 
      function MoveToRight() { 
       var step = parseFloat($("#step").val()/stepPresition); 
       MoveTo(step); 
      } 
      function SizeTo(step) { 

       coordinates[1].lng = coordinates[1].lng + step; 
       coordinates[1].lat = coordinates[1].lat + step; 

       RemoveMarkers(); 
       RemoveOverlay(); 
       AddOverlay(); 
       SetLabels(); 
      } 
      function SizeToSW() { 
       var step = parseFloat($("#step").val()/stepPresition); 
       SizeTo((-1) * step); 
      } 
      function SizeToNE() { 
       var step = parseFloat($("#step").val()/stepPresition); 
       SizeTo(step); 
      } 
      function SetLabels() { 
       var lng0 = $("#lng0"), lng1 = $("#lng1"); 

       lng0.html("SW Point Longitude: " + parseInt(coordinates[0].lng * stepPresition)/stepPresition); 
       lng1.html("NE Point Longitude: " + parseInt(coordinates[1].lng * stepPresition)/stepPresition); 
      } 
      google.maps.event.addDomListener(window, 'load', initialize); 

      $(document).ready(function() { 
       $("#left").on('click', function() { 
        MoveToLeft(); 
       }); 
       $("#right").on('click', function() { 
        MoveToRight(); 
       }); 
       $("#smaller").on('click', function() { 
        SizeToSW(); 
       }); 
       $("#bigger").on('click', function() { 
        SizeToNE(); 
       }); 
      }); 

     </script> 
    </body> 
</html>

希望這有助於你。

注意：該代碼僅用於闡明我的觀點，並不是表現最好和正確的方式來完成我在此處所做的工作。

來源

2013-11-22 15:21:27 sabotero

非常感謝sabotero，但是你怎麼看待這些人爲什麼畫面如此之小，與這些人的[例子]（http://i.imgur.com/5Lbka7v.png）相比呢？ – user2596615

這也是因爲界限！你的邊界（由SW和NE點定義）形成一個矩形。如果你的矩形很小，圖像會很小。 – sabotero

考慮我編輯的代碼！ – sabotero

如何使用Api v3在Google Map上放置圖像？

回答

相關問題