- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有 jQuery Mobile 与 google map 配合使用,这样我就可以显示一个独立的页面,其中包含占据全屏的 map 。但是,我不知道如何制作一个简单的两页示例,其中有一个按钮可以将我带到 map 。
我很困惑为什么所有示例的正文标记中都有 javascript。我一直在尝试遵循此处的示例http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html ,但是很难弄清楚所有源 HTML 中的 basic_map 需要什么。我刚开始使用 jQuery 和 javascript。
以下是作为独立页面使用的 HTML 代码。
<!doctype html>
<html lang="en">
<head>
<title>Simple Map</title>
<!--link type="text/css" rel="stylesheet" href="css/style.css" -->
</head>
<body>
<div id="basic_map" data-role="page" class="page-map">
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="./jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
<!--script type="text/javascript" src="./jquery-ui-map-3.0-rc/demos/js/demo.js"></script-->
<script type="text/javascript">
$(function(){
initializeMap(37.6, -122.1);
});
function initializeMap(lat,lng) {
var adjustedHeight = ($(window).height());
$('#map_canvas').css({height:adjustedHeight});
//$("#map_canvas").height = $(window).height() - $("#header").height() - $("#footer").height();
setTimeout(function() {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}, 500);
}
</script>
</body>
</html>
我尝试实现以下 2 个屏幕示例,其中我在第一页上输入纬度和经度,然后转到下一页上以该点为中心的 map 。但是,我的 map 显示在文本框下方(而不是所需的新页面上),并且出现错误:
Uncaught TypeError: Cannot call method 'changePage' of undefined
根据其他帖子,该错误与我需要调用 pagecreate
函数而不是 $(document).ready()
有关。我没有调用这些函数中的任何一个,因为我不知道它们是否有必要,因为我能够制作其他简单的多页面移动网络应用程序,而无需等待其他页面准备好或创建。
产生错误的我的多屏幕代码是
<!doctype html>
<html lang="en">
<head>
<title>Simple Map</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="./jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
<!--script type="text/javascript" src="./jquery-ui-map-3.0-rc/demos/js/demo.js"></script-->
<script type="text/javascript">
var lat;
var lng;
function plotPoint(){
lat = document.getElementById("lat").value;
lng = document.getElementById("lng").value;
initializeMap(lat,lng);
$.mobile.changePage("#basic_map", "pop");
}
function initializeMap(lat,lng) {
var adjustedHeight = ($(window).height());
$('#map_canvas').css({height:adjustedHeight});
//$("#map_canvas").height = $(window).height() - $("#header").height() - $("#footer").height();
setTimeout(function() {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}, 500);
}
</script>
<!-- Main Page-->
<!-- Start of second page: #viewMap -->
<div data-role="page" id="main" data-theme="c">
<div data-role="header">
<h1>Main Page</h1>
</div><!-- /header -->
<div data-role="content" data-theme="c">
<label for="lat">Latitude:</label>
<input type="text" name="lat" id="lat" value="" />
<label for="lng">Longitude:</label>
<input type="text" name="lng" id="lng" value="" />
<a href="#" data-role="button" data-theme="b" onclick="plotPoint()">Plot this point</a>
</div><!-- /content -->
</div><!-- /viewMap page -->
<div id="basic_map" data-role="page">
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
总而言之,我的问题是:
我对需要将 javascript 放在哪里感到非常困惑。在第一个独立页面示例中,如果我将 javascript 移至 head 标记,则没有任何效果。我需要将 javascript 放在头部和主体中吗?如果是这样,什么会去哪里?
如何在此示例中实现 pagecreate
以及一般情况下我应该何时使用它?
为了使这个基本示例正常工作,我还需要做哪些其他事情?
是否有指向简单的移动 jQuery 代码的指针,其中没有大量额外的内容?
最佳答案
As stated in the jQuery Mobile docs, in jQuery Mobile, AJAX is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler
$(document).ready()
only executes for the first page.
jQuery Mobile 仅加载 DOM 中第一个 data-role="page"元素内的代码。因此,如果通过 AJAX 执行导航,则不会加载第二页上的脚本。
您可能会在下面找到两个 jQuery Mobile 中 Google map 的示例。
第一个示例是多页示例。
第二个示例包含两个页面,通过 Ajax 执行导航,并在第二个页面内加载 map 。
示例1:
<!DOCTYPE html>
<html>
<head>
<title>Map Example Multiple Pages</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery mobile with Google maps</title>
<meta content="en" http-equiv="content-language">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script>
function initialize() {
var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
},
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(document).on("pageinit", "#map-page", function() {
initialize();
});
</script>
</head>
<body>
<div data-role="page" id="home-page">
<!-- /header -->
<div data-role="header">
<h1>Maps</h1>
</div>
<!-- /content -->
<div data-role="content">
<a href="#map-page" data-role="button" data-transition="fade">Click to see the Map</a>
</div>
</div>
<!-- /page -->
<div data-role="page" id="map-page">
<!-- /header -->
<div data-role="header">
<h1>Map</h1>
<a href="#home-page" data-icon="home">Home</a>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:300px;"></div>
</div>
</div>
</body>
</html>
示例2:
说明:
在maps.js中添加以下代码:
function initialize() {
var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
},
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$( document ).on( 'pageshow', '#map-page',function(event){
initialize();
});
$( document ).on( 'click', '#map-anchor',function(event){
event.preventDefault();
$.mobile.changePage( "map.html", { transition: "flip" } );
});
在map-intro.html中添加以下代码:
<!doctype html>
<html lang="en">
<head>
<title>Map Intro Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script src="./maps.js"></script>
</head>
<body>
<div id="map-intro-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">Map Example</a></h1>
</div>
<div data-role="content">
<ul data-role="listview" id="my-list">
<li><a href="#" id="map-anchor">Go to Map</a></li>
</ul>
</div>
</div>
</body>
</html>
在map.html中添加以下代码:
<!DOCTYPE html>
<html>
<head>
<title>jQuery mobile with Google maps geo directions example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- /page -->
<div data-role="page" id="map-page">
<!-- /header -->
<div data-role="header">
<h1>Map</h1>
<a data-rel="back">Back</a>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:300px;"></div>
</div>
</div>
</body>
</html>
我希望这会有所帮助。
关于javascript - 无法让多页jquery mobile与谷歌地图一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12051911/
$.mobile.pageContainer 是指包含其他虚拟页面的元素。它设置为 .所以我认为它可以改变。实际上,某些 JQM 方法 (changePage) 允许您为页面指定非默认页面容器。 J
如何在移动设备上更改方向时触发事件。 调整大小 在 iPod Touch 上运行良好,但在使用 Opera mobile 作为浏览器的移动设备上运行良好。 有关如何在 Opera mobile 上触发
我想为我拥有的装有 Windows Mobile 2003 的设备开发一些应用程序,但我不想为此寻找 Visual Studio 2003 的副本。我想知道是否可以将 Mobile 6 SDK 用于此
我试图阻止 jQuery Mobile 在调用 changePage 时隐藏加载微调器。 程序流程是这样的,从点击一个链接开始,它的点击事件定义如下: $('body').delegate('.lib
我想为运行 Windows Mobile 5 的扫描仪开发应用程序。 MSDN 站点说要下载最新的 SDK(Windows Mobile 6 Professional SDK)。这会起作用还是我应该下
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
我正在尝试使用 Jquery mobile 创建弹出菜单,通过单击按钮,它应该在不更改页面的情况下弹出菜单选项,类似于 jquery mobile 的选择菜单。在 JQM 中有没有办法做到这一点? 谢
在移动设备中,当我打开我的页面并选择一个输入框时,虚拟键盘打开,页面自动滚动以将输入框置于中心。 我不想要这个 Action 。 我搜索了很多答案,其中大多数建议在调整大小事件中手动调用以下 java
jQuery 移动列表中是否可以有多个拆分按钮? 我试过这样做: 1 但它不起作用。将链接包装在 中也不行.我做错了什么,
我想从我的 .js 文件中打开 .html 文件。所以我使用了 $.mobile.changePage("file.html")。在file.html 中有file.js。但是 file.js 在调用
我们有许多使用 Windows Mobile 6 的用户,需要应用较小的更改。例如。更新注册表设置。一种选择是使用我们的设备管理软件推送和执行可执行文件。 我希望这对熟悉 VBScript/JScri
我在PHP网站上有一个日期字段,并且我正在使用jQuery Mobile作为移动网站。 在移动浏览器(例如android上的firefox mobile)上浏览网站时,单击日期文本输入时,会出现日历对
我正在构建一个PhoneGap + JQuery Mobile应用程序,但似乎无法阻止它通过双击放大。我按照http://www.tricedesigns.com/2012/01/17/mobile-
随着 jQuery Mobile 1.3 的到来,.navigate()已添加功能。我听说这是更改页面的推荐方法,似乎他们解决了在页面之间传输数据的问题。 问题是,既然已经简化了,我该如何访问 cha
我想得到一个 input文本区域和 submit按钮附在它的右侧。 理想情况下,两者将使用 100% 的宽度并且并排放置。 我一直在尝试玩弄ui-grid-a和类似的选择,但一切都失败了。你可以看到一
我正在使用 jquery-mobile,我有这两个按钮: Pro: Reset 我希望它们并排显示(内联)。但我想不通。我做了this但它不起作用。你能帮我吗 ?这是我的 CSS:
我正在为 Windows Mobile 6.5 (Samsung Omnia II i8000) 开发 native 应用程序。进行一些更改后,我的应用程序在运行时挂起。 问题是我的应用程序也在启动期
有没有办法从周围和图标中删除背景光盘(圆圈)?我找到的光盘的唯一引用如下 background: rgba(0,0,0,.4) /*{global-ic
jQuery 移动版虽然在很多方面都很棒,但有时也令人沮丧。在这种情况下,我试图动态创建库中非常好的按钮之一。 基本上我想要做的是在输入字段中输入文本,当按下空格键时,它会创建一个带有文本的 jQue
我想在我的第 2 页上显示标题。使用以下内容是否有效: "> .... ? 最佳答案 这取决于你定义什么为“有效”
我是一名优秀的程序员,十分优秀!