2016-11-02 2 views
-1

이 질문은 이전에 물어 보았습니다. 몇 가지 답변을 따라 왔지만 아무 것도 작동하지 않는 것 같습니다. 내가 가진 가장 가까운이 하나this.setValues는 함수가 아닙니다. Google Maps API 3

Map Markers Not Displaying (JavaScript/Google Maps API V3)

했다 그러나 여기 나는 그가 일을하려고하고 그럼에도 불구하고 나는 내 경우는 다른 생각하는지 모르는 나를 위해 작동하지 않았다. 누군가 제발 저에게 말해주세요. 당신은 내가

  • 구글은
  • this.setValues을 정의되지 않은 두 가지 문제

    무엇입니까 볼 수 그래서 여기

    function initialize() { 
     
          var mapOptions = { 
     
           zoom: 16, 
     
           center: new google.maps.LatLng(52.5498783, 13.425209099999961), 
     
           mapTypeId: google.maps.MapTypeId.SATELLITE 
     
          }; 
     
    
     
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     
          
     
          overlay = new DraggableOverlay(map, 
     
                  map.getCenter(), 
     
                  '<div class="overlay">drag me!</div>' 
     
            ); 
     
    
     
    
     
         } 
     
         
     
         DraggableOverlay.prototype = new google.maps.OverlayView(); 
     
    
     
         DraggableOverlay.prototype.onAdd = function() { 
     
          var container = document.createElement('div'), 
     
           that = this; 
     
    
     
          if (typeof this.get('content').nodeName !== 'undefined') { 
     
           container.appendChild(this.get('content')); 
     
          } 
     
          else { 
     
           if (typeof this.get('content') === 'string') { 
     
            container.innerHTML = this.get('content'); 
     
           } 
     
           else { 
     
            return; 
     
           } 
     
          } 
     
          container.style.position = 'absolute'; 
     
          container.draggable = true; 
     
          google.maps.event.addDomListener(this.get('map').getDiv(), 
     
                  'mouseleave', 
     
                   function() { 
     
                    google.maps.event.trigger(container, 'mouseup'); 
     
                   } 
     
          ); 
     
    
     
    
     
          google.maps.event.addDomListener(container, 
     
                  'mousedown', 
     
                 function (e) { 
     
                  this.style.cursor = 'move'; 
     
                  that.map.set('draggable', false); 
     
                  that.set('origin', e); 
     
    
     
                  that.moveHandler = google.maps.event.addDomListener(that.get('map').getDiv(), 
     
                                'mousemove', 
     
                                function (e) { 
     
                                 var origin = that.get('origin'), 
     
                                  left = origin.clientX - e.clientX, 
     
                                  top = origin.clientY - e.clientY, 
     
                                  pos = that.getProjection() 
     
                                    .fromLatLngToDivPixel(that.get('position')), 
     
                                  latLng = that.getProjection() 
     
                                    .fromDivPixelToLatLng(new google.maps.Point(pos.x - left, 
     
                                               pos.y - top)); 
     
                                 that.set('origin', e); 
     
                                 that.set('position', latLng); 
     
                                 that.draw(); 
     
                                }); 
     
    
     
    
     
                 } 
     
          ); 
     
    
     
          google.maps.event.addDomListener(container, 'mouseup', function() { 
     
           that.map.set('draggable', true); 
     
           this.style.cursor = 'default'; 
     
           google.maps.event.removeListener(that.moveHandler); 
     
          }); 
     
    
     
    
     
          this.set('container', container) 
     
          this.getPanes().floatPane.appendChild(container); 
     
         }; 
     
    
     
         function DraggableOverlay(map, position, content) { 
     
          if (typeof draw === 'function') { 
     
           this.draw = draw; 
     
          } 
     
          this.setValues({ 
     
           position: position, 
     
           container: null, 
     
           content: content, 
     
           map: map 
     
          }); 
     
         } 
     
    
     
    
     
    
     
         DraggableOverlay.prototype.draw = function() { 
     
          var pos = this.getProjection().fromLatLngToDivPixel(this.get('position')); 
     
          this.get('container').style.left = pos.x + 'px'; 
     
          this.get('container').style.top = pos.y + 'px'; 
     
         }; 
     
    
     
         DraggableOverlay.prototype.onRemove = function() { 
     
          this.get('container').parentNode.removeChild(this.get('container')); 
     
          this.set('container', null) 
     
         }; 
     
    
     
    
     
         google.maps.event.addDomListener(window, 'load', initialize);
    html, body, #map-canvas { 
     
         height: 100%; 
     
         margin: 0px; 
     
         padding: 0px 
     
         } 
     
         .overlay{ 
     
         background:yellow; 
     
         padding:30px; 
     
         border:4px double black; 
     
         }
    <div id="map-canvas"></div> 
     
        <script async defer 
     
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7FTNE22Wl6S6DTQF83sTZTqbFFPzEkmU&libraries=drawing,places,geometry&callback=initialize"> 
     
        
     
        </script>

    함수

아니다 이 문제에 직면 한 사람이라면 알려주세요.

답변

0

google is not defined : 당신은 비동기 API를로드하는 경우, 당신은 콜백 함수 내부의 API (귀하의 경우 initialize)에 따라 모든 코드를 넣어해야합니다. API에 의존하는 것은 API가로드 될 때까지 작동하지 않습니다. DraggableOverlay의 정의를 initialize 안에 이동하거나 API를 동 기적으로로드해야합니다.

의 API 비동기 무부하하기 실시 예 (같은 the example in the documentationDr.Molle's answer that it looks like the DraggableOverlay came from: Can we make custom overlays draggable on google maps V3)

function initialize() { 
 
    var mapOptions = { 
 
    zoom: 16, 
 
    center: new google.maps.LatLng(52.5498783, 13.425209099999961), 
 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
 
    }; 
 

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

 
    overlay = new DraggableOverlay(map, 
 
    map.getCenter(), 
 
    '<div class="overlay">drag me!</div>' 
 
); 
 
} 
 

 
DraggableOverlay.prototype = new google.maps.OverlayView(); 
 
DraggableOverlay.prototype.onAdd = function() { 
 
    var container = document.createElement('div'), 
 
    that = this; 
 

 
    if (typeof this.get('content').nodeName !== 'undefined') { 
 
    container.appendChild(this.get('content')); 
 
    } else { 
 
    if (typeof this.get('content') === 'string') { 
 
     container.innerHTML = this.get('content'); 
 
    } else { 
 
     return; 
 
    } 
 
    } 
 
    container.style.position = 'absolute'; 
 
    container.draggable = true; 
 
    google.maps.event.addDomListener(this.get('map').getDiv(), 
 
    'mouseleave', 
 
    function() { 
 
     google.maps.event.trigger(container, 'mouseup'); 
 
    } 
 
); 
 

 
    google.maps.event.addDomListener(container, 
 
    'mousedown', 
 
    function(e) { 
 
     this.style.cursor = 'move'; 
 
     that.map.set('draggable', false); 
 
     that.set('origin', e); 
 

 
     that.moveHandler = google.maps.event.addDomListener(that.get('map').getDiv(), 
 
     'mousemove', 
 
     function(e) { 
 
      var origin = that.get('origin'), 
 
      left = origin.clientX - e.clientX, 
 
      top = origin.clientY - e.clientY, 
 
      pos = that.getProjection() 
 
      .fromLatLngToDivPixel(that.get('position')), 
 
      latLng = that.getProjection() 
 
      .fromDivPixelToLatLng(new google.maps.Point(pos.x - left, 
 
       pos.y - top)); 
 
      that.set('origin', e); 
 
      that.set('position', latLng); 
 
      that.draw(); 
 
     }); 
 
    } 
 
); 
 
    google.maps.event.addDomListener(container, 'mouseup', function() { 
 
    that.map.set('draggable', true); 
 
    this.style.cursor = 'default'; 
 
    google.maps.event.removeListener(that.moveHandler); 
 
    }); 
 
    this.set('container', container) 
 
    this.getPanes().floatPane.appendChild(container); 
 
}; 
 

 
function DraggableOverlay(map, position, content) { 
 
    if (typeof draw === 'function') { 
 
    this.draw = draw; 
 
    } 
 
    this.setValues({ 
 
    position: position, 
 
    container: null, 
 
    content: content, 
 
    map: map 
 
    }); 
 
}; 
 

 

 
DraggableOverlay.prototype.draw = function() { 
 
    var pos = this.getProjection().fromLatLngToDivPixel(this.get('position')); 
 
    this.get('container').style.left = pos.x + 'px'; 
 
    this.get('container').style.top = pos.y + 'px'; 
 
}; 
 

 
DraggableOverlay.prototype.onRemove = function() { 
 
    this.get('container').parentNode.removeChild(this.get('container')); 
 
    this.set('container', null) 
 
}; 
 

 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
.overlay { 
 
    background: yellow; 
 
    padding: 30px; 
 
    border: 4px double black; 
 
}
<div id="map-canvas"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing,places,geometry"> 
 
</script>