新功能

Question

我在谷歌地图页面上添加了导航栏，从外部json文件中获取数据并且它没有正确显示地图。此外，它表示在jquery移动文件中的getelementbyID中传递空字符串。是否有办法修复此？

<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%;margin:5% }
      </style>
      <link rel="stylesheet"   href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />

      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=something&sensor=false"></script>
    <script type="text/javascript">
      function initialize() {

        var myOptions = {
          center: new google.maps.LatLng(43.66207, -79.37617),
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        $.getJSON('bikeshare.json', function(data) { 


            $.each( data.stationBeanList, function(i, value) {


                var locationLatLong = new google.maps.LatLng(value.latitude, value.longitude);

                var marker = new google.maps.Marker({
                position: locationLatLong,
                map: map,
                icon:"img/bike.png",
                title:"Bikes available: "+JSON.stringify(value.availableBikes)
                });


                  var infoWindow = new google.maps.InfoWindow({

                    content:"Docks Available:  "+JSON.stringify(value.availableDocks)

                  });

                  google.maps.event.addListener(marker, "click", function() {

                    infoWindow.open(map, marker);

                  });



            });


      });



      }
    </script>
  </head>
      <body onload="initialize()">
        <div data-role="header" >
        <h3>BIKESHARE</h3>
        <div data-role="navbar" data-position="fixed">
        <ul>
        <li><a href="index.html" class="ui-btn-active ui-state-persist">Home</a>   </li>
        <li><a>Reports</a></li>
        <li><a href="locations.html">Locations</a></li>
        <li><a href="map.html">Map</a></li>
      </ul>
      </div>
      </div>
       <div   data-role="content" id="map_canvas" ></div>
    </body>
    </html>

Answer 1

这是一个CSS问题。

改变这个：

#map_canvas {height: 100%;margin:5% }

为：

#map_canvas {height:700px; margin:5%}

或者另一种方法是计算新的高度并在调用initialize()函数之前设置它：

 //Add this line or something similar which calculate div height in the initialize function
 $('#map_canvas').css('height', ($(window).height()-10) + 'px');

新功能

function initialize() {
    $('#map_canvas').css('height', ($(window).height() - 10) + 'px');
    var myOptions = {
        center: new google.maps.LatLng(43.66207, -79.37617),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    $.getJSON('bikeshare.json', function (data) {
        $.each(data.stationBeanList, function (i, value) {
            var locationLatLong = new google.maps.LatLng(value.latitude, value.longitude);
            var marker = new google.maps.Marker({
                position: locationLatLong,
                map: map,
                icon: "img/bike.png",
                title: "Bikes available: " + JSON.stringify(value.availableBikes)
            });
            var infoWindow = new google.maps.InfoWindow({
                content: "Docks Available:  " + JSON.stringify(value.availableDocks)
            });
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.open(map, marker);
            });
        });
    });
}

将导航栏添加到页面时，地图显示不正确

1 个答案:

新功能