谷歌地圖不會出現在我的KendoMobile應用程序

我目前正在開發一個KendoMobile web應用程序，並一切順利，直到我嘗試顯示地圖。谷歌地圖不會出現在我的KendoMobile應用程序

無論我做了什麼，地圖都沒有出現。爲了解決我的問題，我瀏覽了kendoUI文檔和論壇，並找到this主題。

我調整它以便在我的項目中使用它，但即使這個示例完美地工作，它仍然不起作用。

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

    <title>GoogleMap and KendoUI</title> 
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js"></script> 

    <!-- add the google maps scripts --> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCG4jUolof0jhqQu0j1aNqSWfW_ms-wRKg&sensor=true"></script> 

    <!-- The following style is used to disable the scroller and set the correct height for the map element --> 
    <style> 
     #map .km-content, 
     #map .km-scroll-container, 
     #map #map_canvas { 
      display: -webkit-box; 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div data-role="view" data-title="Info" id="info"> 
     <div style="width:100%; text-align: center"> 
      <h1>Using Google Maps<br />in KendoUI application</h1> 
     </div> 
    </div> 

    <!-- hook up to the init event of the view and initialize the google map --> 
    <div data-role="view" data-init="buildMap" id="map" data-title="Map"> 
     <div id="map_canvas" style="width:100%;"></div> 
    </div> 

    <div data-role="layout" data-id="default"> 
     <div data-role="header"> 
      <div data-role="navbar"> 
       <span data-role="view-title"></span> 
      </div> 
     </div> 

     <div data-role="footer"> 
      <div data-role="tabstrip"> 
       <a href="#info" data-icon="info">Info</a> 
       <a href="#map" data-icon="globe">Map</a> 
      </div> 
     </div> 
    </div> 

<script> 
    new kendo.mobile.Application(document.body, {layout: "default"}); 

    //initialize the google map 
    function buildMap(e) { 
     var myOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var mapElement = $("#map_canvas"); 
     var container = e.view.content; 

     var map = new google.maps.Map(mapElement[0], myOptions); 
    } 

</script> 
</body> 
</html>

你能幫我找到問題？我忘記了什麼嗎？爲了修復它，有什麼特別的事嗎？

來源

2014-03-26 neobagram

您發現該代碼庫爲2歲 - 你現在可以使用stretched View做到這一點： http://jsbin.com/yocakibu/1/edit

來源

2014-03-27 04:56:40 Bundyo

謝謝！我注意到這個話題很古老，但當我看到「kendoMobile + maps」這個詞時，strechedView並沒有在結果中「清晰」出現。實際上，結果並不多 – neobagram

谷歌地圖不會出現在我的KendoMobile應用程序

回答

相關問題