無法在IBM Worklight上集成Google地圖

Question

我嘗試了很多方法嘗試在我的應用程序屏幕上顯示一英寸谷歌地圖，但直到現在似乎沒有任何工作

我的HTML：

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>GoogleMaps</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            <link rel="stylesheet" href="css/GoogleMaps.css">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC_qKehMg7x4nlda1vtoXlAPwYTmCgbs0&sensor=false"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
            <script>window.$ = window.jQuery = WLJQ;</script>
        </head>
        <body id="content" style="display: none;">
             <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content" id="content">
            <div id="map_canvas" style="height:100%"></div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                First Page
            </h3>
        </div>
    </div>
        </body>
</html>

我的JS：

function wlCommonInit(){


}

$(document).on('pageinit', '#index',function(e,data){    
       // This is the minimum zoom level that we'll allow
       var minZoomLevel = 12;

       var map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: minZoomLevel,
          center: new google.maps.LatLng(38.50, -90.50),
          mapTypeId: google.maps.MapTypeId.ROADMAP
       });

      /* // Bounds for North America
       var strictBounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(28.70, -127.50), 
         new google.maps.LatLng(48.85, -55.90)
       );

       // Listen for the dragend event
       google.maps.event.addListener(map, 'dragend', function() {
         if (strictBounds.contains(map.getCenter())) return;

         // We're out of bounds - Move the map back within the bounds

         var c = map.getCenter(),
             x = c.lng(),
             y = c.lat(),
             maxX = strictBounds.getNorthEast().lng(),
             maxY = strictBounds.getNorthEast().lat(),
             minX = strictBounds.getSouthWest().lng(),
             minY = strictBounds.getSouthWest().lat();

         if (x < minX) x = minX;
         if (x > maxX) x = maxX;
         if (y < minY) y = minY;
         if (y > maxY) y = maxY;

         map.setCenter(new google.maps.LatLng(y, x));
       });

       // Limit the zoom level
       google.maps.event.addListener(map, 'zoom_changed', function() {
         if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
       });  */

    });

我的CSS：

/* Reset CSS */
a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
    margin: 0;
    padding: 0;
}

/* Worklight container div */
#content {
    height: 460px;
    margin: 0 auto;
    width: 320px;
}

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

我嘗試了另一種方法來檢查我的api密鑰是否正常工作http://jsfiddle.net/wrkf8/3/它正在工作，當我復制粘貼相同的確切代碼時它從未在worklight上工作過。 我甚至嘗試使用它但沒有用，當瀏覽器獨立運行時一切正常但是當它被帶入工作燈環境時它變得空白。 任何幫助，將不勝感激。

Answer 1

這里有很多問題。 首先，您使用的是舊版jQuery mobile。 根據您使用的Worklight版本，它可能與Worklight提供的jQuery不兼容。 如果你在WL 6上，你應該使用jQM 1.3。 接下來，在包含jQuery之前，您將包含jQM。 如果您使用Worklight新項目向導，並在向導中添加jQM，則所有內容都將以正確的順序添加到html中。 我沒有看到JavaScript被包含在html中。 事實上，標准的3 js文件（initOptions，項目名稱和消息）似乎也不存在。 您的內容div具有與正文（“內容”）相同的ID，這是一個魔術ID，導致顯示設置為無。 需要刪除或更改內容div上的id。

創建一個新的Worklight應用程序並使用該向導包含一個最新的jQuery Mobile（WL6.0的1.3.1，WL.1的1.3.1或1.3.2），其中大部分將被理順。 然后你會發現地圖仍然不可見，因為它的高度為0px。 您需要將map_canvas添加到您的css規則：

#content, #map_canvas {
padding: 0;
position : absolute !important; 
top : 40px !important;  
right : 0; 
bottom : 40px !important;  
left : 0 !important;     
}

那仍然不太對勁。 地圖的底部被頁腳切斷。 有關使用jQuery Mobile和Google地圖的Worklight應用程序示例，請參閱： https ：//www.ibm.com/developerworks/community/blogs/dhuyvett/entry/including_external_content_in_a_worklight_application1？lang = en該應用程序不專注於映射，但是，附加應用程序中包含了與其他博客文章中的dojo映射小部件等效的jQuery。

重要提示：該博客文章附帶的項目是在WL 5中編寫的。如果您希望它在WL 6中運行，則需要更新jQuery Mobile。

無法在IBM Worklight上集成Google地圖

問題描述

1 個解決方案

解決方案1
4 已采納 2013-12-11 15:25:25

無法在IBM Worklight上集成Google地圖

問題描述

1 個解決方案

解決方案1 4 已采納 2013-12-11 15:25:25

解決方案1
4 已采納 2013-12-11 15:25:25