jQuery Mobile 干扰 Google Maps v3 API
Posted
技术标签:
【中文标题】jQuery Mobile 干扰 Google Maps v3 API【英文标题】：jQuery Mobile interferes with Google Maps v3 API 【发布时间】：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 中运行谷歌地图代码，它将起作用。 ***.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 之后，我回来尝试克服这个问题。在这里阅读***.com/questions/16038562/… 和demos.jquerymobile.com/1.4.0/map-geolocation/… 之后，我能够弄清楚。谢谢你把我推向正确的方向
【参考方案1】：
通过查看这两篇文章，我能够弄清楚这一点：
PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles? JQuery Mobile + Google Maps v3HTML
<html>
<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" />
<link href='http://fonts.googleapis.com/css?family=Lobster|Quattrocento+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
</head>
<body>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a">
<h1>My App</h1>
</div>
<div role="main" class="ui-content" id="map">
<!-- map loads here... -->
</div>
<div id="storeListLoading"><img src="img/loader.gif"></div>
<dl id="storeList"></dl>
</div>
</body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/async.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.scrollintoview.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=_MY_API_KEY_&libraries=geometry,places"> </script>
</html>
CSS
#map-page
width: 100%;
height: 100%;
padding: 0;
#map
width: 100%;
height: 45%;
z-index: 10;
position: fixed;
JS
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,
disableDefaultUI: true
;
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);
,
;
$( document ).on( "pageshow", "#map-page", function()
app.initialize();
);
【讨论】：
以上是关于jQuery Mobile 干扰 Google Maps v3 API的主要内容，如果未能解决你的问题，请参考以下文章
iOS 7 Safari 干扰 jQuery Mobile 页脚
在显示 jQuery Mobile 页面之前让 Google 地图正确加载
单击打开 jQuery Mobile 面板小部件时的 Google 地图指针
jquery mobile, google map body 高出 100%