無法谷歌地圖在IBM工作燈集成

我已經嘗試了很多的方法，試圖展示我的應用程序的屏幕，但沒有對谷歌地圖的一英寸似乎到現在爲止無法谷歌地圖在IBM工作燈集成

我的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上工作過。我甚至試圖使用this，但沒有用，在瀏覽器上獨立運行時一切正常，但當它被帶入工作燈環境時，它一片空白。任何幫助，將不勝感激。

來源

2013-12-11 satheeshwaran

關於Google Maps與Worklight的集成存在很多現存問題;你看過他們嗎？看到這個查詢：http://stackoverflow.com/search?q=%5Bworklight%5D+google+maps+is%3Aquestion –

此外，還有一個Hello Maps博客文章引導你通過它。該文章已有一年的歷史，因此適用於較舊版本的Worklight。你可能不得不適應。您沒有提及您正在運行的Worklight版本。 https://www.ibm.com/developerworks/community/blogs/dhuyvett/entry/using_google_maps_in_worklight_hello_map15?lang=en – Barbara

@Barbara我已看到了教程和使用道場工具包，但我想要的東西使用jQueryMobile做了什麼。 – satheeshwaran

這裏有很多問題。首先，您使用的是jQuery手機的真正舊版本。根據您使用的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（對於WL 6.1，WL6.0,1.3.1或1.3.2爲1.3.1），並且大部分內容將被理順。然後你會發現地圖仍然不可見，因爲它的高度爲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 Maps的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。

來源

2013-12-11 15:25:25

無法谷歌地圖在IBM工作燈集成

回答

相關問題