专业编程基础技术教程

网站首页 > 基础教程 正文

练手H5 使用jquery mobile h5手段

ccvgpt 2024-11-07 09:50:34 基础教程 6 ℃

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

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

练手H5 使用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>

Tags：

猜你喜欢

最近发表
标签列表