谷歌地图使用setPanel（）显示文本方向不起作用

时间：2013-05-30 22:12:19

标签： ruby-on-rails google-maps jquery-mobile

我按https://developers.google.com/maps/documentation/javascript/examples/directions-panel

尝试此示例代码

但如果我使用它并没有向我显示任何我必须在使用rails和jquerymobile的项目中使用它，我的文件是这样的：

  '<!DOCTYPE html>
  <html>
 <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
 <title>Displaying text directions with <code>setPanel()</code></title>

<link  href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
<style>
   #directions-panel {
      height: 100%;
      float: right;
      width: 390px;
      overflow: auto;
  }

  #map-canvas {
      margin-right: 400px;
  }

  #control {
      background: #fff;
      padding: 5px;
      font-size: 14px;
      font-family: Arial;
      border: 1px solid #ccc;
      box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
      display: none;
  }

  @media print {
      #map-canvas {
          height: 500px;
          margin: 0;
      }

      #directions-panel {
          float: none;
          width: auto;
      }
  }
</style>

 <script>
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();

  function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var mapOptions = {
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(41.850033, -87.6500523)
      };
      var map = new google.maps.Map(document.getElementById('map-canvas2'),
              mapOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById('directions-panel'));

      var control = document.getElementById('control');
      control.style.display = 'block';
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
  }

  function calcRoute() {
      var start = document.getElementById('start').value;
      var end = document.getElementById('end').value;
      var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
          }
      });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

 </script>
 </head>
 <body>
 <div id="control">
 <strong>Start:</strong>
 <select id="start" onchange="calcRoute();">
 <option value="chicago, il">Chicago</option>
 <option value="st louis, mo">St Louis</option>
 <option value="joplin, mo">Joplin, MO</option>
 <option value="oklahoma city, ok">Oklahoma City</option>
 <option value="amarillo, tx">Amarillo</option>
 <option value="gallup, nm">Gallup, NM</option>
 <option value="flagstaff, az">Flagstaff, AZ</option>
 <option value="winona, az">Winona</option>
 <option value="kingman, az">Kingman</option>
 <option value="barstow, ca">Barstow</option>
 <option value="san bernardino, ca">San Bernardino</option>
 <option value="los angeles, ca">Los Angeles</option>
 </select>
 <strong>End:</strong>
 <select id="end" onchange="calcRoute();">
 <option value="chicago, il">Chicago</option>
 <option value="st louis, mo">St Louis</option>
 <option value="joplin, mo">Joplin, MO</option>
 <option value="oklahoma city, ok">Oklahoma City</option>
 <option value="amarillo, tx">Amarillo</option>
 <option value="gallup, nm">Gallup, NM</option>
 <option value="flagstaff, az">Flagstaff, AZ</option>
 <option value="winona, az">Winona</option>
 <option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="directions-panel"></div>
<div id="map-canvas2"></div>
</body>
</html>

它只显示一秒钟的botton开始和结束问题在哪里......？

3 个答案:

答案 0 :(得分：1)

地图没有大小。它需要高度和宽度。这对我有用：

<div id="map-canvas2" style="height:500px; width:600px;"></div>

working example

答案 1 :(得分：0)

<script type="text/javascript" src="http://maps.google.com/maps/api  /js?sensor=false">    </script>
 <script src="json2.js"></script>
 <script type="text/javascript">
 var map, ren, ser;
  var data = {};
function get_latitude_longitude()
  {
 var geocoder = new google.maps.Geocoder();
      var address1 = document.getElementById("start").value;

     geocoder.geocode( { 'address': address1}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
   var location1 = results[0].geometry.location;
//alert(location1);
      var latitude1 = results[0].geometry.location.lat();
   var longitude1 = results[0].geometry.location.lng();
var results1 = latitude1+", "+longitude1;
//alert(results1);
 document.googlemapfrm.f_r1.value =  latitude1;
 document.googlemapfrm.f_r2.value =  longitude1;
  document.googlemapfrm.location1.value =  location1;
 //l_r
 } 
     }); 
       var geocoder = new google.maps.Geocoder();
      var address2 = document.getElementById("end").value;

    geocoder.geocode( { 'address': address2}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
  var location2 = results[0].geometry.location;
  var latitude2 = results[0].geometry.location.lat(); 
 var longitude2 = results[0].geometry.location.lng();
var results2 = latitude2+", "+longitude2;
 document.googlemapfrm.l_r1.value =  latitude2;
 document.googlemapfrm.l_r2.value =  longitude2;
// alert(longitude2);
  document.googlemapfrm.location2.value =  location2;
 } 
}); 

}
     function goma()
      {

map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(27.6094, 75.13991099999998) })

ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();

ser.route({ 'origin': new                     google.maps.LatLng(document.getElementById('f_r1').value,document.getElementById('f_r2').va     lue), 'destination':  new              google.maps.LatLng(document.getElementById('l_r1').value,document.getElementById('l_r2').va      lue), 'waypoints':[{location: document.getElementById('waypoint_now').value}],    'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
    if(sts=='OK')ren.setDirections(res);

 })
  }
</script>

答案 2 :(得分：0)

                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                <script src="json2.js"></script>
                <script type="text/javascript">
                var map, ren, ser;
                var data = {};
                function get_latitude_longitude()
                {
                var geocoder = new google.maps.Geocoder();
                var address1 = document.getElementById("start").value;

                geocoder.geocode( { 'address': address1}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                var location1 = results[0].geometry.location;
                //alert(location1);
                var latitude1 = results[0].geometry.location.lat();
                var longitude1 = results[0].geometry.location.lng();
                var results1 = latitude1+", "+longitude1;
                //alert(results1);
                document.googlemapfrm.f_r1.value =  latitude1;
                document.googlemapfrm.f_r2.value =  longitude1;
                document.googlemapfrm.location1.value =  location1;
                //l_r
                } 
                }); 


                var geocoder = new google.maps.Geocoder();
                //var address2 = "Bikaner ,IND";
                var address2 = document.getElementById("end").value;

                geocoder.geocode( { 'address': address2}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                var location2 = results[0].geometry.location;
                var latitude2 = results[0].geometry.location.lat(); 
                var longitude2 = results[0].geometry.location.lng();
                var results2 = latitude2+", "+longitude2;
                document.googlemapfrm.l_r1.value =  latitude2;
                document.googlemapfrm.l_r2.value =  longitude2;
                // alert(longitude2);
                document.googlemapfrm.location2.value =  location2;
                } 
                }); 

                }
                function goma()
                {

                map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(27.6094, 75.13991099999998) })

                ren = new google.maps.DirectionsRenderer( {'draggable':true} );
                ren.setMap(map);
                ren.setPanel(document.getElementById("directionsPanel"));
                ser = new google.maps.DirectionsService();

                ser.route({ 'origin': new google.maps.LatLng(document.getElementById('f_r1').value,document.getElementById('f_r2').value), 'destination':  new google.maps.LatLng(document.getElementById('l_r1').value,document.getElementById('l_r2').value), 'waypoints':[{location: document.getElementById('waypoint_now').value}], 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
                if(sts=='OK')ren.setDirections(res);


                })

                }



                </script>
                <body>
                <div id="mappy" style="float:left;width:70%; height:100%"></div>
                <!--<div id="map-canvas" style="float:left;width:70%; height:100%"></div>-->
                <div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
                <form name="googlemapfrm" method="post">
                <div>
                <strong>Start: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>
                <select id="start" >
                <option value="Jaipur">Jaipur</option>
                <option value="jagatpura">jagatpura</option>
                <option value="malviya nagar, Jaipur">Malviya Nagar</option>
                <option value="Sikar">Sikar</option>
                <option value="Alwar">Alwar</option>
                <option value="Luniawas">Luniyawas</option>
                <option value="Karoli">Karoli</option>
                <option value="Baran">Baran</option>
                <option value="Sawai Madhopur">Sawai Madhopur</option>
                <option value="bassi">bassi</option>
                <option value="goner">Goner</option>
                <option value="lalsot">Lalsot</option>
                <option value="Chomu">Chomu</option>
                <option value="Ajmer">Ajmer</option>
                <option value="Rigas">Rigas</option>
                <option value="Khatu">Khatu</option>
                <option value="Udaipur">Udaipur</option>
                <option value="Bikaner">Bikaner</option>
                <option value="Churu">Churu</option>
                </select>
                <strong><br><br>End: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>
                <select id="end" onChange="get_latitude_longitude()">
                <option value="Jaipur">Jaipur</option>
                <option value="jagatpura">jagatpura</option>
                <option value="malviya nagar, Jaipur">Malviya Nagar</option>
                <option value="Sikar">Sikar</option>
                <option value="Alwar">Alwar</option>
                <option value="Luniawas">Luniyawas</option>
                <option value="Karoli">Karoli</option>
                <option value="Baran">Baran</option>
                <option value="bassi">bassi</option>
                <option value="goner">Goner</option>
                <option value="lalsot">Lalsot</option>
                <option value="Chomu">Chomu</option>
                <option value="Ajmer">Ajmer</option>
                <option value="Rigas">Rigas</option>
                <option value="Khatu">Khatu</option>
                <option value="Sawai Madhopur">Sawai Madhopur</option>
                <option value="Udaipur">Udaipur</option>
                <option value="Bikaner">Bikaner</option>
                <option value="Churu">Churu</option>
                </select>

                <strong><br><br>Waypoint: </strong>
                <select id="waypoint_now" >
                <option value="Jaipur">Jaipur</option>
                <option value="bassi">bassi</option>
                <option value="goner">Goner</option>
                <option value="lalsot">Lalsot</option>
                <option value="Chomu">Chomu</option>
                <option value="Ajmer">Ajmer</option>
                <option value="Rigas">Rigas</option>
                <option value="Khatu">Khatu</option>
                <option value="Sawai Madhopur">Sawai Madhopur</option>
                <option value="Sikar">Sikar</option>
                <option value="Bikaner">Bikaner</option>
                <option value="Churu">Churu</option
                </select>
                </div>
                <div id="distance_direct" > </div>
                <input type="hidden" name="location1" id="location1" >
                <input type="hidden" name="location2" id="location2" >
                <input type="hidden" name="f_r1" id="f_r1" >
                <input type="hidden" name="f_r2" id="f_r2" >
                <input type="hidden" name="l_r1" id="l_r1" >
                <input type="hidden" name="l_r2" id="l_r2" >
                   <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Show   Map" onClick="return goma(); ">
                </form>
                </body>
相关问题
最新问题