텍스트 오버레이 - 잘못된 위치에 표시됨

나는 Question에 대한 대답을 구현했습니다. html 파일을 실행할 때 Google Map 마커를 통해 쓰고있는 텍스트가 잘못된 위치에 표시됩니다 (그림 참조 error.png). 누가 마커 위에 정확하게 텍스트를 표시하도록 도와 줄 수 있습니까?텍스트 오버레이 - 잘못된 위치에 표시됨

enter image description here

는 Marker.html

<html><head> 
<title> Hi </title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

      function TxtOverlay(pos, txt, cls, map){ 

       this.pos = pos; 
       this.txt_ = txt; 
       this.cls_ = cls; 
       this.map_ = map; 
       this.div_ = null; 
       this.setMap(map); 
      } 

      TxtOverlay.prototype = new google.maps.OverlayView(); 
      TxtOverlay.prototype.onAdd = function(){ 
       var div = document.createElement('DIV'); 
       div.className = this.cls_; 
       div.innerHTML = this.txt_;     
       var overlayProjection = this.getProjection(); 
       var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
       div.style.left = (position.x) + 'px'; 
       div.style.top = (position.y)+ 'px';     
       var panes = this.getPanes(); 
       panes.floatPane.appendChild(div); 
      } 
      TxtOverlay.prototype.draw = function(){ 
       var overlayProjection = this.getProjection(); 
       var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
       var div = this.div_; 
       div.style.left = (position.x) + 'px'; 
       div.style.top = (position.y)+ 'px'; 
      } 

      TxtOverlay.prototype.onRemove = function(){ 
       this.div_.parentNode.removeChild(this.div_); 
       this.div_ = null; 
      } 
      TxtOverlay.prototype.hide = function(){ 
       if (this.div_) { 
        this.div_.style.visibility = "hidden"; 
       } 
      } 
      TxtOverlay.prototype.show = function(){ 
       if (this.div_) { 
        this.div_.style.visibility = "visible"; 
       } 
      } 
      TxtOverlay.prototype.toggle = function(){ 
       if (this.div_) { 
        if (this.div_.style.visibility == "hidden") { 
         this.show(); 
        } 
        else { 
         this.hide(); 
        } 
       } 
      } 

      TxtOverlay.prototype.toggleDOM = function(){ 
       if (this.getMap()) { 
        this.setMap(null); 
       } 
       else { 
        this.setMap(this.map_); 
       } 
      } 

      var map; 
      function init(){ 
       var latlng = new google.maps.LatLng(37.90695894, -122.07920128); 
       var myOptions = { 
        zoom: 4, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       map = new google.maps.Map(document.getElementById("map"), myOptions); 
       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        title: "Hello World!", 
        icon:"./bluepin.PNG" 
       }); 
       customTxt = "<div>1</div>" 
       txt = new TxtOverlay(latlng,customTxt,"customBox",map) 
      } 
     </script> 
     <style> 
      .customBox {         
       background: AARRGGBB; 
       border: 1px; 
       color:#ffffff; 
       position: relative; 
      } 
     </style> 
    </head> 
    <body onload="init()"> 
     <div id="map" style="width: 600px; height: 600px;"> 
     </div> 
    </body> 
</html>

출처

2013-02-05 Anonymous

당신은 마커를 통해 나타나도록 DIV을 상쇄해야합니다. 오프셋 (-5, -30)은이 마커와 숫자 "1"에 적용됩니다.

 function TxtOverlay(pos, txt, cls, map, offset){ 

      this.pos = pos; 
      this.txt_ = txt; 
      this.cls_ = cls; 
      this.map_ = map; 
      this.offset_ = offset; 
      this.div_ = null; 
      this.setMap(map); 
     } 

     TxtOverlay.prototype.onAdd = function(){ 
      var div = document.createElement('DIV'); 
      div.className = this.cls_; 
      div.innerHTML = this.txt_;     
      this.div_ = div; 
      var overlayProjection = this.getProjection(); 
      var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
      div.style.left = (position.x + this.offset_.x) + 'px'; 
      div.style.top = (position.y + this.offset_.y)+ 'px';     
      var panes = this.getPanes(); 
      panes.floatPane.appendChild(div); 
     } 
     TxtOverlay.prototype.draw = function(){ 
      var overlayProjection = this.getProjection(); 
      var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
      var div = this.div_; 
      div.style.left = (position.x + this.offset_.x) + 'px'; 
      div.style.top = (position.y + this.offset_.y)+ 'px';     
     } 

     txt = new TxtOverlay(latlng,customTxt,"customBox",map,new google.maps.Point(-5,-30))

Example

당신은 또한 대단히 감사합니다 the MarkerWithLabel utility library

Example

출처

2013-02-05 16:21:33 geocodezip

볼 수 있습니다. –

텍스트 오버레이 - 잘못된 위치에 표시됨

답변

관련 문제