如何：驾驶路线，首次载入时使用Google地图放大部件？

我有一个简单的谷歌地图，显示从纽约到洛杉矶的行车路线，但是当它在页面上加载时，我想让它放大一部分路线，而不是完全缩小以显示整个路线纽约州到洛杉矶，改变缩放似乎没有工作？如何：驾驶路线，首次载入时使用Google地图放大部件？

的jsfiddle：http://jsfiddle.net/xtian/YNcsx/

JS：

var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    var neighborhoods = []; 
    var VenueNames = []; 
    var ShoutOut = []; 
    var markers = []; 
    var pics = []; 
    var timeStamp = []; 
    var iterator = 0; 

    var contentString;  

    var polylineOptionsActual = new google.maps.Polyline({ 
    strokeColor: '#ff3434', 
    strokeOpacity: 0.8, 
    strokeWeight: 5 
    });  

function initialize() { 
      var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
      directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: polylineOptionsActual}); 
      var myOptions = { 
      zoom:5, 
      strokeColor: "#000000", 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      directionsDisplay.setMap(map); 

      var start = "new york, ny"; 
      var end = "los angeles, ca"; 
      var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.TravelMode.DRIVING 
      }; 
      directionsService.route(request, function(result, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(result); 
      } 
      }); 
     }  
$(document).ready(function() { 
    initialize(); 
});

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css" /> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCrCbLj7KnxfLpQjh2GF5hMwZqwAzS23Tw&sensor=false"></script>  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/map-small.js"></script> 
    </head> 
    <body> 
     <div class="container-front"> 
      <div class="map-container"> 
      <div id="map_canvas" style="width: 430px; height: 360px; border: 6px solid #024d91;"></div> 
     </div> 
    </div> 
    </body> 
</html>

来源

2012-03-28 Omni

你可以从腿部/步的START_LOCATION和END_LOCATION创建的LatLngBounds，并用它作为论据map.fitBounds()

map.fitBounds(new google.maps.LatLngBounds(result.routes[0].legs[0].steps[0].start_location) 
            .extend(result.routes[0].legs[0].steps[0].end_location))

还设置了preserveViewport，用于 - 选项的directionsDisplay到真正。

http://jsfiddle.net/doktormolle/BRQff/

来源

2012-03-28 14:46:43

如何：驾驶路线，首次载入时使用Google地图放大部件？

回答

相关问题