Googleマップマーカーのパンをクリックして画面の一番下に移動

-1

Googleマッププロジェクトで作業しています。マーカーのポップアップとしてカスタムオーバーレイを使用しています。ポップアップは一種の大きなものです。だから私は、マーカをクリックするとマップが表示されるので、マーカはポップアップの余地を許すためにビューポートの底から約50ピクセルです。Googleマップマーカーのパンをクリックして画面の一番下に移動

現在のところ、マーカーの緯度/経度にパンするだけです。

google.maps.event.addDomListener(div, "click", function(e) { 
      var x = e.x, 
       y = $(div).offset(), 
       windowHeight = $(window).height(), 
       windowWidth = $(window).width(); 
      if(!$(div).find('.ryan').hasClass("scaleUp")){ 
       map.panTo({lat: args.location.lat, lng: args.location.lng}) 
       var top = $(div).offset().top, mapHeight = $('#content-wrapper').height(); 



       $(div).append(buildBubble(self.getHcpCount())).css("z-index", markerZindex++) 
       var bubble = $(this).find('.ryan'); 
       var windowPercentage = .5; 
       bubble.css({ 
        "width": windowWidth * windowPercentage, 
        "height": windowHeight * windowPercentage, 
        "top": 0, 
        "left": 0, 
        "margin-top": -1 * windowWidth * windowPercentage/2, 
        "margin-left": -1 * windowWidth * windowPercentage/2 + $(this).width()/2 
       }); 

       bubble.find('.bubble-body').css({ 
        "height": bubble.height() - bubble.find('.bubble-header').height() 
       }); 

       bubble.find('.bubble-section').css({ 
        "width": (bubble.width() /*- arrowLeft - arrowRight*/)/2 - 5 
       }); 

       bubble.find('.hcps-wrapper').css({ 
        "width": (bubble.width() /*- arrowLeft - arrowRight*/) 
       }) 

       attachBubbleHandler($(div)); 

       map.setOptions({disableDoubleClickZoom: true }); 
      }else{ 
       map.setOptions({disableDoubleClickZoom: false }); 
      } 
      $(div).find('.ryan').toggleClass("scaleUp", function(){ 
       if(!$(this).hasClass('scaleUp')){ 
        $(this).unbind().remove(); 
       } 
      }); 
     }); 

     //this handles the zIndex problem with clusters being over marker bubbles 
     this.getPanes().floatPane.appendChild(div); 

    } 

    var point = this.getProjection().fromLatLngToDivPixel(this.latlng); 

    //LOCATION OF THE TOP AND LEFT POINTS OF THE BUBBLE 
    if (point) { 
     div.style.left = (point.x - 20) + 'px'; 
     div.style.top = (point.y) + 'px'; 
    } 

};//END DRAW MARKER

出典

2016-06-16 Ryan

簡単な解決策1：
あなたが水平方向の中心マーカーを合わせる気にしない場合：まずマップのdiv要素の高さの半分でマップをパン、その後、マーカーの位置を地図の中心を設定し、マイナス下からのオフセット：

marker.addListener('click', function(){ 
    var divHeightOfTheMap = document.getElementById('map').clientHeight; 
    var offSetFromBottom = 50; 
    map.setCenter(marker.getPosition()); 
    map.panBy(0, -(divHeightOfTheMap/2 - offSetFromBottom)); 
});

簡単な解決策2：
あなたはマーカー水平方向の中心を揃えるにはしたくない場合は、次のまずマーカーの緯度と経度マップの中央に地図の中心を設定その後、マップのdiv要素の高さの半分のマイナス下部からオフセットすることで、マップをパン：

marker.addListener('click', function(){ 
    var divHeightOfTheMap = document.getElementById('map').clientHeight; 
    var offSetFromBottom = 50; 
    map.setCenter(new google.maps.LatLng(marker.getPosition().lat(), map.getCenter().lng())); 
    map.panBy(0, -(divHeightOfTheMap/2 - offSetFromBottom)); 
});

解決策3：

ピクセルの位置を計算するために、空のオーバーレイを使用します。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Pan to bottom</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    <script> 
     var marker; 
     var map; 
     var overlay; 
     divOverlay.prototype = new google.maps.OverlayView(); 
     function initMap() { 
      var mLatLng = {lat: 40.758984, lng: -73.985131}; 
      map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 15, 
       center: mLatLng 
      }); 

      var marker = new google.maps.Marker({ 
       position: mLatLng, 
       map: map 
      }); 

      overlay = new divOverlay(map, marker); 
      overlay.setMap(map); 

      marker.addListener('click', function(){ 
       overlay.panMarkerToBottom(50, true); // (Offset from bottom, want horizontally center?) 
      }); 
     } 
     function divOverlay(map, marker) { 
      this.bounds_ = map.getBounds(); 
      this.map_ = map; 
      this.div_ = null; 
      this.marker_ = marker; 
     } 
     divOverlay.prototype.onAdd = function() { 
      this.div_ = document.createElement('div'); 
      this.getPanes().overlayLayer.appendChild(this.div_); 
     }; 
     divOverlay.prototype.onRemove = function() { 
      this.div_.parentNode.removeChild(this.div_); 
      this.div_ = null; 
     };  
     divOverlay.prototype.draw = function() { 
     }; 

     divOverlay.prototype.panMarkerToBottom = function(offSetFromBottom, isCenter) { 
      if (offSetFromBottom){ 
       var overlayProjection = this.getProjection(); 
       var mPos = overlayProjection.fromLatLngToContainerPixel(this.marker_.getPosition()); 
       var mapDiv = this.map_.getDiv(); 
       var mapWidth = mapDiv.offsetWidth; 
       var mapHeight = mapDiv.offsetHeight; 
       var panX = 0; 
       if (isCenter) { 
        panX = -(mapWidth/2 - mPos.x); 
       }; 
       var panY = -(mapHeight - mPos.y - offSetFromBottom); 
       this.map_.panBy(panX , panY); 
      } 
     };  
     google.maps.event.addDomListener(window, 'load', initMap); 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    </body> 
</html>

Iお役に立てれば！

出典

2016-06-20 12:36:29 MKiss

Googleマップマーカーのパンをクリックして画面の一番下に移動

答えて

関連する問題