余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

练手H5 使用jquery mobile(h5零基础入门教程)

xiyangw 2022-12-05 09:34 14 浏览 0 评论

使用了jquery mobile,引入百度地图

功能:增加热点、查找附近热点、登录、注册。。。

微信扫描体验H5程序

共三个页面,一个主页是地图页,另外就是注册和修改用户信息页。


主页面增加地点

一、head引用的内容

引用jquery、jquery mobile、百度map api,这里后面的参数ak需要到百度地图开放平台申请

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
	<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=..."></script>

	<title>map</title>
</head>


二、左下角的查找控件

百度地图的增加控件代码块,点击控件调用$("#qryPopup").popup("open");弹出小窗口

//定义一个查找控件类
function QueryCondControl(){    
    this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;    
    this.defaultOffset = new BMapGL.Size(10, 10);    
}    

QueryCondControl.prototype = new BMapGL.Control();
QueryCondControl.prototype.initialize = function(map){
	 var div = document.createElement("div");    
	 var img=document.createElement("img");
	 img.src = "qry.png";
	 div.appendChild(img);  
	 div.style.cursor = "pointer";    
	 
	 div.onclick = function(e){  
		 //qryPopup
		console.log(e);
		 $("#qryPopup").popup("open");
	 }    

	 map.getContainer().appendChild(div);    
	 return div;
}

var myQueryCondControl = new QueryCondControl();
map.addControl(myQueryCondControl);


弹出的小窗口的代码块:

	<div data-role="popup" id="qryPopup" class="ui-content" style="min-width:250px;">
        <div>
			<p>查找</p>
			<center><p id="qrymsg"></p></center>
			<label for="qryname" class="ui-hidden-accessible">名称:</label>
			<input type="text" name="qryname" id="qryname" placeholder="名称">
			<label for="qrykind" class="ui-hidden-accessible">种类:</label>
			<select name="qrykind" id="qrykind" data-native-menu="false">
				<option value="A1">网红打卡点</option>
				<option value="A2">风景区</option>
				<option value="A3">公园</option>
				<option value="A4">名胜古迹</option>
				<option value="A5">寺庙</option>
				<option value="A9">其他</option>
			</select>
			<input type="text" name="qrykindother" id="qrykindother" placeholder="其他种类">
			
			<button id="btqrysubmit">查询</button>
        </div>
    </div>

相关推荐

前后端分离 Vue + NodeJS(Koa) + MongoDB实践

作者:前端藏经阁转发链接:https://www.yuque.com/xwifrr/gr8qaw/vr51p4写在前面闲来无事,试了一下Koa,第一次搞感觉还不错,这个项目比较基础但还是比较完整了,...

MongoDB 集群如何工作?

一、什么是“MongoDB”?“MongoDB”是一个开源文档数据库,也是领先的“NoSQL”数据库,分别用“C++”“编程语言”编写,使用带有“Schema”的各种类似JSON的文档,是也分别被认为...

三部搭建mongo,和mongo UI界面

三步搭建mongo,和mongoUI界面安装首先你需要先有一个docker的环境检查你的到docker版本docker--versionDockerversion18.03.1-ce,b...

Mongodb 高可用落地方案

此落地方案,用于实现高可用。复制集这里部署相关的复制集,用于实现MongoDB的高可用。介绍MongoDB复制集用于提供相关的数据副本,当发生硬件或者服务中断的时候,将会从副本中恢复数据,并进行自动...

一次线上事故,我顿悟了MongoDB的精髓

大家好,我是哪吒,最近项目在使用MongoDB作为图片和文档的存储数据库,为啥不直接存MySQL里,还要搭个MongoDB集群,麻不麻烦?让我们一起,一探究竟,继续学习MongoDB分片的理论与实践,...

IDEA中安装MongoDB插件-再也无要nosql manager for mongodb

大家都知道MongoDB数据库作为典型的非关系型数据库被广泛使用,但基于MongoDB的可视化管理工具-nosqlmanagerformongodb也被用的较多,但此软件收费,所以国内的破解一般...

数据库监控软件Lepus安装部署详解

Lepus安装部署一、软件介绍Lepus是一套开源的数据库监控平台,目前已经支持MySQL、Oracle、SQLServer、MongoDB、Redis等数据库的基本监控和告警(MySQL已经支持复...

YAPI:从0搭建API文档管理工具

背景最近在找一款API文档管理工具,之前有用过Swagger、APIManager、Confluence,现在用的还是Confluence。我个人一直不喜欢用Swagger,感觉“代码即文档”,让代...

Mac安装使用MongoDB

下载MongoDB包:https://www.mongodb.com/download-center解压mongodb包手动解压到/usr/local/mongodb文件夹配置Mac环境变量打开环境...

保证数据安全,不可不知道的MongoDB备份与恢复

大家在项目中如果使用MongoDB作为NOsql数据库进行存储,那一定涉及到数据的备份与恢复,下面给大家介绍下:MongoDB数据备份方法在MongoDB中我们使用mongodump命令来备...

MongoDB数据备份、还原脚本和定时任务脚本

备注:mongodump和mongorestore命令需要在MongoDB的安装目录bin下备份脚本备份格式/usr/local/mongodb/bin/mongodump -h ...

等保2.0测评:mongoDB数据库

一、MongoDB介绍MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产...

MongoDB入门实操《一》

什么是MongoDBMongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之...

Python安装PyMongo的方法详细介绍

欢迎点击右上角关注小编,除了分享技术文章之外还有很多福利,私信学习资料可以领取包括不限于Python实战演练、PDF电子文档、面试集锦、学习资料等。前言本文主要给大家介绍的是关于安装PyMongo的...

第四篇:linux系统中mongodb的配置

建议使用普通用户进行以下操作。1、切换到普通用户odysee。2、准备mongodb安装包,自行去官网下载。3、解压安装包并重命名为mongodb4.04、配置mongodbcdmongod...

取消回复欢迎 发表评论: