使用了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>