谷歌地图放大到方向点

Posted 2021-03-28

我有一个谷歌地图，我在两点之间显示方向，我正在尝试fit to bounds地图。这两点在地图上正确显示，但我无法得到fit to bounds

这是我的设置：

#map
  width: 100%
  height: 400px

<div id="map"></div>

这是两点的javascript：

var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'map'}}, function(){

    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var METERS_TO_MILES = 0.000621371192;

    directionsDisplay.setMap(handler.getMap());
    var request = {
        origin:      new google.maps.LatLng(<%=@origin%>),
        destination: new google.maps.LatLng(<%=@destination%>),
        travelMode:  google.maps.TravelMode.WALKING,

    };


    directionsService.route(request, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            var totaldistance = 0;
            var route = response.routes[0];
            // display total distance information.
            for (var i = 0; i < route.legs.length; i++) {
                totaldistance = totaldistance + route.legs[i].distance.value;
            }
            document.getElementById('distance').innerhtml += "<strong>Total walking distance is " + ((totaldistance * METERS_TO_MILES * 10) / 10).toFixed(2) + " miles</strong>";
            directionsDisplay.setDirections(response);
        }
    });

});

这是我迄今为止所捆绑的但没有奏效：

handler.fitMapToBounds();
handler.getMap().setZoom(15);

还试过这个：

directionsDisplay = new google.maps.DirectionsRenderer({
        preserveViewport: true
    });

我有什么想法可以实现这个？

更新1

我之前没有提到我在动态标签中有地图：

$(function() {

    //show new panel function
    function ShowNewPanel(theLink, theTab, thePane) {
        //activate new pane
        theTab.find('.tab-pane-show.active').fadeOut(200, function() {
            $(this).removeClass('active');
            $(thePane).fadeIn(200, function() {
                $(this).addClass('active');
            });
        });

        //activate new link
        theTab.find('.tab-nav-show li').removeClass('active');
        theTab.find('.tab-nav-show a[href="'+thePane+'"]').parent('li').addClass('active');
    }

    //Using Tab Links
    $('.tab .tab-nav-show ul li a, a.tab-anchor').on('click', function() {
        var $theLink = $(this);
        var $theTab = $theLink.closest('.tab');
        var $thePane = $theLink.attr('href');
        ShowNewPanel($theLink, $theTab, $thePane)
    });


});




<div class="tab">
  <nav class="tab-nav-show">
    <ul>
      <li><a href="#details">Details</a></li>
      <li><a href="#map-location">Location</a></li>
      <li><a href="#comments">Comments</a></li>
    </ul>
  </nav>
</div>

  <div class="tab-pane-show" id="map-location">
    <div id="map"></div>
  </div>

答案

您可以尝试使用LatLngBounds对象 - 添加您需要的任何点，然后调用fitBounds方法

var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'map'}}, function(){
    var bounds = new google.maps.LatLngBounds();
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var METERS_TO_MILES = 0.000621371192;

    directionsDisplay.setMap(handler.getMap());
    var request = {
        origin:      new google.maps.LatLng(<%=@origin%>),
        destination: new google.maps.LatLng(<%=@destination%>),
        travelMode:  google.maps.TravelMode.WALKING,

    };
    bounds.extend( request.origin );
    bounds.extend( request.destination );

    directionsService.route(request, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            var totaldistance = 0;
            var route = response.routes[0];
            // display total distance information.
            for (var i = 0; i < route.legs.length; i++) {
                totaldistance = totaldistance + route.legs[i].distance.value;
            }
            document.getElementById('distance').innerHTML += "<strong>Total walking distance is " + ((totaldistance * METERS_TO_MILES * 10) / 10).toFixed(2) + " miles</strong>";
            directionsDisplay.setDirections(response);
            map.fitBounds( bounds );
        }
    });

});