Google지도 V3에서 Google지도 용 맞춤 콘텐츠 상자를 만드는 방법을 찾지 못하는 것 같습니다. 기본 흰색 풍선 팝업 변경에 대한 가서 어떻게 ...Google지도 맞춤 콘텐츠 상자?
http://www.apple.com/retail/alamoana/map/
내 질문은 : 아래
사용자 지정 콘텐츠 상자의 예입니다?
건배!
Google지도 V3에서 Google지도 용 맞춤 콘텐츠 상자를 만드는 방법을 찾지 못하는 것 같습니다. 기본 흰색 풍선 팝업 변경에 대한 가서 어떻게 ...Google지도 맞춤 콘텐츠 상자?
http://www.apple.com/retail/alamoana/map/
내 질문은 : 아래
사용자 지정 콘텐츠 상자의 예입니다?
건배!
봐 더 구체적인 : 나는 몇 가지 예제 코드를 발견했다. 당신이보고 싶다면 나는 dev.mapfaire.com에 그들을 사용하고 있습니다.
이 예에서는 Google지도의 두 번째 버전을 사용하고 있습니다. 이 기능은 세 번째 기능에서 사용하지 못할 수도 있습니다.
하지만 정보창에 html 코드를 추가하고 맞춤 설정할 수 있습니다. 어떻게 직접 볼 수 있는지를 잘 모르겠지만 콘텐츠가 어떻게 생겼는지는 분명히 바꿀 수 있습니다.
편집 : http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html
가 gmaps-utility-library-dev에서 봐와 v3 utility libraries의 인포 박스 툴킷에서 ExtInfoWindow utility 및 PopupMarker utility
이들은 모두 v2를 사용하고 있습니다. – aniri
Sudhir이 지적했듯이 Infobox Plugin은 사용자가 원하는 것을 수행하는 한 가지 방법입니다. 최근에 비슷한 질문에 using the infobox plugin for google maps api 3에 대한 답을하고 완전한 예제를 제공했습니다.
개인적으로 저는 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 (마커) 함수를 사용하여 마커에 관련된 폭 요소의 높이 및 오프셋 픽셀을 수집 상자
그건 완벽하게 환호하는거야. – Smickie