Api v3를 사용하여 Google Map에 이미지를 넣는 방법은 무엇입니까?

나는 집 (top view, 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에서 우선 점 :

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

더 많은 점수를 통과하면 무시됩니다.

google.maps 형식의 좌표는 DD.mmmmmm 형식이므로 포인트 뒤의 부분은 미터입니다 (내 메모리가 나를 실망시키지 않는 경우). 따라서 이미지가 축척이면 앵커 포인트를 쉽게 계산할 수 있습니다.

다음 예에서는 두 가지 첫 번째 포인트를 사용했습니다. 이 작업을 효율적으로 활용하려면 다음

는 .html 파일
변경 이미지의 경로에있는 모든 코드를 복사합니다.
페이지를 실행하십시오.

그럼 내가 말하는 것을 보여주기 위해 이미지를 오른쪽과 왼쪽으로 이동할 수 있습니다.

--- 수정 됨 CODE : 기능을 추가 이미지 작은/큰 ---------

<!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

대단히 감사합니다. 사보타로 님,하지만이 사람들과 비교하여 [그림] (http://i.imgur.com/5Lbka7v.png)과 비교하여 왜 그림이 너무 작 았는지에 대해 어떻게 생각합니까? – user2596615

그것은 경계 때문이기도합니다! 범위 (SW 및 NE 포인트에 의해 정의 됨)는 사각형을 만듭니다. 사각형이 작 으면 이미지가 작아집니다. – sabotero

내 편집 된 코드를 고려하십시오! – sabotero

Api v3를 사용하여 Google Map에 이미지를 넣는 방법은 무엇입니까?

답변

관련 문제