Fatal编程技术网
  • google-maps/
  • Google maps 如何：驾驶方向，首次加载时放大零件，使用谷歌地图？

Google maps 如何：驾驶方向，首次加载时放大零件，使用谷歌地图？

google-maps

Google maps 如何：驾驶方向，首次加载时放大零件，使用谷歌地图？,google-maps,zooming,Google Maps,Zooming,我有一个简单的谷歌地图，显示从纽约到洛杉矶的行驶方向，但当它加载到一个页面上时，我想让它放大路线的一部分，而不是完全缩小以显示从纽约到洛杉矶的整个路线，改变缩放似乎不起作用 jsFiddle： JS: HTML: html{高度：100%} 正文{高度：100%；边距：0；填充：0} #地图画布{高度：100%} ​ 您可以从支腿/台阶的开始位置和结束位置创建LatLngBounds，并将其用作map.fitbunds（）的参数。 还可以将方向显示的保存视口-选项设置为真 var d

我有一个简单的谷歌地图，显示从纽约到洛杉矶的行驶方向，但当它加载到一个页面上时，我想让它放大路线的一部分，而不是完全缩小以显示从纽约到洛杉矶的整个路线，改变缩放似乎不起作用

jsFiddle：

JS:

HTML:


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
​
您可以从支腿/台阶的开始位置和结束位置创建LatLngBounds，并将其用作
map.fitbunds（）的参数。

还可以将方向显示的保存视口-选项设置为真

    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();
});​

<!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>​

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))