一、H5頁面開發(fā)
1.手機端外部JS庫
- viewport，手機端的適配；
- layui，手機端界面UI；
- jweixin-1.6.0，H5與微信小程序通信的API接口文件
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/javascript" src="static/js/jquery.2.14.js"></script>
<!--layui封裝庫-->
<link rel="stylesheet" href="static/layui/css/layui.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
<!--微信小程序API-->
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2.地圖容器
<div class="layui-card">
<div id="map" style="width: 100%;height: 300px;"></div>
</div>
3.數(shù)據(jù)表單
<div class="layui-card">
<div class="layui-card-header" style="text-align: center;font-weight: bold;">說明：拖動紅色標注可調(diào)整經(jīng)緯度精度</div>
<div class="layui-card-body">
<div class="layui-form-item">
<label for="province" class="layui-form-label">省份<span class="x-red">*</span></label>
<div class="layui-input-block"><input type="text" id="province" name="province" class="layui-input"></div>
</div>
<div class="layui-form-item">
<label for="city" class="layui-form-label">地市<span class="x-red">*</span></label>
<div class="layui-input-block"><input type="text" id="city" name="city" class="layui-input"></div>
</div>
<div class="layui-form-item">
<label for="ccountry" class="layui-form-label">區(qū)縣 <span class="x-red">*</span></label>
<div class="layui-input-block"><input type="text" id="ccountry" name="ccountry" class="layui-input"></div>
</div>
<div class="layui-form-item">
<label for="detailInfo" class="layui-form-label">地址<span class="x-red">*</span></label>
<div class="layui-input-block"><input type="text" id="detailInfo" name="detailInfo" class="layui-input"></div>
</div>
<div class="layui-form-item">
<label for="lnglat" class="layui-form-label">經(jīng)緯度 <span class="x-red">*</span></label>
<div class="layui-input-block"><input type="text" id="lnglat" name="lnglat" class="layui-input"></div>
</div>
</div>
</div>
4.地圖加載
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=3.0&ak=3HGqGo1RHf***&callback=map_init";
document.body.appendChild(load);
}
window.onload = map_load;
5.回調(diào)封裝函數(shù)+自動定位
-
getBdGeo();定位封裝函數(shù)； -
marker.addEventListener('dragend', function () {},監(jiān)聽標注事件，手動調(diào)整景點 -
getCurrentPosition，加載即自動采集當前位置的經(jīng)緯度信息和城市地址信息；
//初始化地圖;
var map;
function map_init() {
map = new BMap.Map("map", {enableMapClick: false});
var point = new BMap.Point(120.199672, 30.331184);
map.centerAndZoom(point, 17);
map.enableScrollWheelZoom();
// 添加定位控件;
var geolocationControl = new BMap.GeolocationControl();
map.addControl(geolocationControl);
//自動定位;
getBdGeo();
function getBdGeo() {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
map.clearOverlays();
map.panTo(r.point);
//alert(JSON.stringify(r));
$("#province").val(r.address.province);
$("#city").val(r.address.city);
$("#ccountry").val(r.address.district);
$("#detailInfo").val(r.address.street+r.address.street_number);
$("#lnglat").val(r.point.lng + "," + r.point.lat)
//返回當前中心點;
var points = new BMap.Point(r.point.lng, r.point.lat);
map.centerAndZoom(points, 17);
//添加標注;
var marker = new BMap.Marker(points);
map.addOverlay(marker);
marker.enableDragging();
marker.addEventListener('dragend', function () {
//console.log(marker.getPosition().lat);
$("#lnglat").val(marker.getPosition().lng + "," + marker.getPosition().lat)
})
} else {
//定位失敗
layer.msg('無法獲取定位，系統(tǒng)將自動定位，錯誤碼：' + this.getStatus(), {icon: 2, time: 1000}, function () {
map.centerAndZoom("杭州", 17); //用城市名設(shè)置地圖中心點
})
}
}, function (error) {
console.log(error);
}, {
enableHighAccuracy: true,//是否要求高精度的地理位置信息
timeout: 1000,//對地理位置信息的獲取操作做超時限制，如果再該事件內(nèi)未獲取到地理位置信息，將返回錯誤
maximumAge: 0//設(shè)置緩存有效時間，在該時間段內(nèi)，獲取的地理位置信息還是設(shè)置此時間段之前的那次獲得的信息，超過這段時間緩存的位置信息會被廢棄
});
}
}
二、微信小程序核心代碼
1.lnglat.wxml
通過web-view 組件直接嵌入H5地址。
- https://test.com/,必須完成備案，必須在微信小程序后臺綁定業(yè)務(wù)域名；
- 小程序內(nèi)使用web-view組件嵌套H5頁面，當H5頁面更換了內(nèi)容后，小程序里的h5頁面不更新的處理方案：增加時間戳
?timestamp={{timestamp}}
<web-view src="https://test.com/data/lnglat.html?timestamp={{timestamp}}"></web-view>
2.lnglat.js
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
timestamp: '${new Date().getTime()}'
},
3.lnglat.json
導(dǎo)航欄設(shè)置
{
"usingComponents": {},
"navigationBarTitleText": "漏刻有時地理信息",
"navigationBarBackgroundColor": "#16baaa",
"navigationBarTextStyle": "white"
}
三、版本發(fā)布遇見的問題
版本發(fā)布過程中，某些組件或API需要在app.json中配置或者提前申請，按照發(fā)布時的提醒，逐步操作即可。
文章來源：http://www.zghlxwxcb.cn/news/detail-445715.html
@漏刻有時文章來源地址http://www.zghlxwxcb.cn/news/detail-445715.html
到了這里，關(guān)于微信小程序?qū)W習(xí)實錄6(百度經(jīng)緯度采集、手動調(diào)整精度、H5嵌入小程序、百度地圖jsAPI、實時定位、H5更新自動刷新)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
