Google지도 맞춤 콘텐츠 상자?

개인적으로 저는 Google의 사용자 지정 오버레이 스크립트 등을 사용하지 않습니다. 나는 사용자 정의 CSS 파일을로드 할 수있는 iframe을 유지하는 사용자 정의 PHP 페이지를 만들었으며, 또한 맵의 맨 위로 이동하는 사용자 정의 DIV를 작성합니다. 그러면 사용자 정의 DIV가 열릴 때 드래그하는 동안 위치가 변경됩니다.

"끌기, 끌기 시작, 끌기"이벤트를 사용하여 작성한 요소의 위치를 다시 지정할 수 있습니다. 사용자 정의 마커를 사용하면 페이지에 설정 한 경우

는이 기능과의 픽셀 위치 얻을 수 있습니다 :

getPosition: function (marker) { 
     var map = this.map /* Your map, in my case is part of my controller object linked to this.map */; 
     var scale = Math.pow(2, map.getZoom()); 
     var nw = new google.maps.LatLng(
      map.getBounds().getNorthEast().lat(), 
      map.getBounds().getSouthWest().lng() 
     ); 
     var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw); 
     var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition()); 
     var pixelOffset = new google.maps.Point(
      Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), 
      Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale) 
     ); 
     return pixelOffset; /* Returns the top left pixel of the specified marker on the specified map */ 
    }

그리고 나는 창을 드래그 할 때 사용되는 setPosition를 기능을 사용을, 당신의 정의를 설정 요소의 마커 위치까지의 위치. 드래그 이벤트는 다음과 같은 방식으로 설정할 수 있습니다. google.maps.addEventListener (map, 'drag', function() {setPosition (marker, element);}); 그냥 밖에서 조금 생각해야 때로는

setPosition: function (marker,element) { 
    var p = this.getPosition(marker), 
     s = {width:element.offsetWidth,height:element.offsetHeight}, 
     markerOffset = {width:58,height:58}; 
    element.style.left = p.x - (s.width/2) + (markerOffset.width/2) + "px"; /* We set the element's left position to the marker's position + half of our element's width + half of the marker's width's so it is centered */ 
    element.style.top = p.y - s.height - (markerOffset.height) + 10 + "px"; /* We set the element's top position to the marker's position + our element's height + markers height so it is 10px above our marker vertically */ 
},

는 setPosition를 기능은 간단하게하는 getPosition (마커) 함수를 사용하여 마커에 관련된 폭 요소의 높이 및 오프셋 픽셀을 수집 상자

출처

2011-11-22 10:18:05 LogicGate

Google지도 맞춤 콘텐츠 상자?

답변

관련 문제