Google map api v3 显示半张地图?

Posted

技术标签:

【中文标题】Google map api v3 显示半张地图?【英文标题】:Google map api v3 shows half a map? 【发布时间】:2013-07-10 08:41:05 【问题描述】:

我在 Jquery Mobile 中做一个项目,但遇到了 Google API 的问题。当我从不同的页面导航到 MapPage 时,MapPage 本身会显示地图 OK,但是当从 HomePage 移动到 MapPage 时,它​​只显示地图的一半。如果我手动刷新或调整地图大小,它会修复它 - 但我已经尝试了 map.resize() 没有运气,所以我需要一个不同的解决方案。

我在下面附上了我的 HomePage 和 MapPage 的 html 代码:

<!DOCTYPE html>
<html>

  <head>
     <meta charset="utf-8" />
     <meta name="description" content="Project - Mobile" />
     <meta name="author" content="Yuval Vardi" />
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>RentAcar</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="JS/jquery-2.0.2.js"></script>
    <script src="JS/jquery.mobile-1.3.1.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="JS/mapScript.js" > </script>
    </head>

 <body>
<div id="HomePage" data-role="page" data-add-back-btn="true">
     <div data-role="header">

 </div> 
   <div data-role="content">  
     <a href="#calculate" data-role="button"  data-theme="b" data-icon="gear" data-iconpos="top">Trip Info</a>
  </div>
 <div data-role="footer" class="mainFooter"> 
   <h2> &copy; Copyright Yuval Vardi  </h2>  
   <p class="yearNow"> </p> 
  </div> 

  </div> 



 <div id="calculate" data-role="page" data-add-back-btn="true"> 

       <div data-role="header">

       </div>

       <div data-role="content">

             <table id="mapTable">
                 <tr>
                    <td>
                        <p>Pickup location</p> 
                    </td>
                    <td></td>
                    <td>
                        <p>Where do you go?</p> 
                    </td>
                 </tr>
                 <tr>
                     <td>
                          <input id="startInput" type="text" value="" placeholder="Start location" />
                     </td>
                     <td></td>
                     <td>
                         <input type="text" id="end" placeholder="Return location"/>
                     </td>
                 </tr>
                 <tr>
                     <td data-role="controlgroup">
                         <button id="myLocation" onclick="getMarker()" data-role="button" data-theme="e" > Find me </button> 
                     </td>
                     <td></td>
                     <td data-role="controlgroup">
                          <button onclick="calcRoute()" data-theme="b" > Calculate rout   </button>
                     </td>
                 </tr>
                 <tr>
                    <td colspan="3">

                    <div id="map-canvas" style="width:400px; height:280px;"> 
                    </div> 

                    </td>
                 </tr>

             </table>

       </div>

       <div data-role="footer" class="mainFooter"> 
          <h2> &copy; Copyright Yuval Vardi </h2>  
          <p class="yearNow"> </p> 
          <a class="ui-btn-right" href="#HomePage" data-role="button" data-icon="home" data-iconpos="top" >Home</a>

       </div>   

  </div>

   </body></html>

我的 javascript 文件:

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


function initialize() 
    directionsDisplay = new google.maps.DirectionsRenderer();   
    var israel = new google.maps.LatLng(32.0938254, 34.7786934); // the var for our initial point
    var mapOptions = 
        zoom: 7,    
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: israel // where to center the map on initial!        
    ;

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
 

function calcRoute() 
    initialize();
    var start = document.getElementById('startInput').value;
    var end = document.getElementById('end').value;
    var distanceInput = document.getElementById("distance");

    var request = 
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    ;

    directionsService.route(request, function (response, status) 
        if (status == google.maps.DirectionsStatus.OK) 
            directionsDisplay.setDirections(response);
            distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
        
    );

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


    function getMarker()             
        if (navigator.geolocation)  
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        
    

    function showPosition(position) 
        var lat=position.coords.latitude;
        var long=position.coords.longitude;                          
        marker(lat,long); //calls the marker function
    

    function showError(error)
    
        alert ("Error loading map");
    

    function marker(lat,long) 
        var myLatlng = new google.maps.LatLng(lat,long);
        var mapOptions = 
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        ;
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    $("#startInput").attr("value",myLatlng);       
    var marker = new google.maps.Marker(
        position: myLatlng,
        map: map,
        title:"You are Here!"
    );

【问题讨论】:

【参考方案1】:

地图 div 的宽度为零。要使用百分比宽度,您必须定义其所有父元素的宽度(或至少达到可用于计算宽度的固定大小元素)。

见Mike Williams' Google Maps API v2 tutorial page on percentage sizing

【讨论】:

更改为固定宽度:400px 并尝试为所有父母添加宽度 - 仍然无法正常工作。 查看本帖回复:link【参考方案2】:

您需要调用 checkResize() API 函数。像这样:

map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.checkResize()

这个对我也有用

【讨论】:

TypeError: undefined is not a function (-1)

以上是关于Google map api v3 显示半张地图?的主要内容,如果未能解决你的问题,请参考以下文章

Google Maps API V3:奇怪的 UI 显示故障(附截图)

如何使用 API V3 在每页显示多个 Google 地图

Google Maps API v3 SVG 标记消失

google maps js v3 api教程 -- 创建infowindow

使用 jQuery mobile、google maps API v3 将 infoWindow 添加到地图标记

google maps js v3 api教程 -- 创建一个地图