Question

我目前正在开发一个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>

你可以帮我找到问题吗？我忘了什么吗？有什么特别的事要做才能解决它吗？

Answer 1

您找到的代码库已有2年历史了 - 您现在可以使用stretched View执行此操作： http://jsbin.com/yocakibu/1/edit

谷歌地图没有出现在我的KendoMobile应用程序中

1 个答案: