0
我在Phonegap內部構建了一個應用程序，我有兩個部分獨立工作，但不會一起工作。jQuery Mobile干擾谷歌地圖v3 API
這裏是我想要呈現HTML：
<body>
<div id="map"></div>
<div data-role="collapsible-set" id="storeList">
<div data-role="collapsible" data-mini="true">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible" data-mini="true">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
</div>
</body>
當我的標題是這個順序，地圖上顯示出來，但jQuery Mobile的崩潰下拉沒有。這可能源於在jQuery本身之前嘗試加載jQuery Mobile。
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>
<title>Working Google Maps</title>
</head>
然而，當我翻轉過來，它和jQuery移動之前放置的jQuery，那麼可摺疊的數據集工作，但谷歌地圖顯示不出來。這只是一個空白的空間。
html, body {
width: 100%;
height: 100%;
padding-top: 10%;
}
#map {
width: 100%;
height: 60%;
z-index: 5
}
#storeList {
height: 30%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2
}
冗長的JavaScript
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
// app.receivedEvent('deviceready');
navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},
onSuccess: function(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var latLong = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: latLong,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myLocationMarkerImage = {
url: 'img/blue_dot.png',
anchor: new google.maps.Point(16, 0)
};
var myLocationMarker = new google.maps.Marker({
position: latLong,
map: map,
title: 'my location',
icon: myLocationMarkerImage
});
},
onError: function(error){
alert("the code is " + error.code + ". \n" + "message: " + error.message);
},
};
app.initialize();
TIA：
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>
的事項的CSS！
JQM不干擾，你初始化谷歌地圖JQM初始化之前。此後，您應該通過聆聽jQM的事件來初始化Google地圖。如果您在'pagecreate'事件或'pagecontainershow'內運行Google地圖代碼，它將起作用。 http://stackoverflow.com/a/22001257/1771795 – Omar 2014-11-04 22:29:10
順便說一句，只是爲了您的信息。 [phonegap-googlemaps-plugin]（https://github.com/wf9a5m75/phonegap-googlemaps-plugin）比Google Maps JS API v3的性能更好。當然，這個插件可以和JQueryMobile一起使用。一探究竟。 – wf9a5m75 2014-11-05 01:15:58
@ wf9a5m75我需要使用Places庫，並且有更多使用javascript API的例子。一旦我弄清楚如何將這兩個網格進行網格劃分，我將在稍後對其進行遷移 – 2014-11-05 09:04:29