【发布时间】：2014-12-31 22:10:52
【问题描述】：
我正在 Phonegap 中构建一个应用程序，我有两个部分各自工作，但不能一起工作。
这是我要渲染的 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 移动折叠下拉菜单不会。这可能是由于尝试在 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 mobile 之前时，可折叠数据集工作，但谷歌地图没有显示。它只是一个空白区域。
<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：
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！
【问题讨论】：
-
JQM 没有干扰，您是在初始化 JQM 之前初始化 Google 地图。之后，您应该通过监听 jQM 的事件来初始化 Google 地图。如果您在
pagecreate事件或pagecontainershow中运行谷歌地图代码，它将起作用。 stackoverflow.com/a/22001257/1771795 -
顺便说一句，仅供参考。 phonegap-googlemaps-plugin 的性能优于 Google Maps JS API v3。当然，该插件适用于 JQueryMobile。看看吧。
-
@wf9a5m75 我需要使用 Places Library，还有更多使用 javascript API 的示例。一旦我弄清楚如何将两者网格化，我将在稍后进行迁移
-
听起来不错，@KennyColeman。是的，我也有实现 Places API 的计划，但我没有足够的时间来开发它。同时，想要通过 phonegap-googlemaps-plugin 使用 Places API 的人，他们同时使用 Google Maps JS API 和地图插件。
-
@Omar 在需要使用 jQuery Mobile 之后，我回来尝试克服这个问题。在这里阅读stackoverflow.com/questions/16038562/… 和demos.jquerymobile.com/1.4.0/map-geolocation/… 之后，我能够弄清楚。谢谢你把我推向正确的方向
标签： javascript jquery google-maps jquery-mobile cordova