一、H5页面开发

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.数据表单

<div class="layui-card"><div class="layui-card-header" style="text-align: center;font-weight: bold;">说明：拖动红色标注可调整经纬度精度</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">区县 <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">经纬度 <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 = "//api.map.baidu.com/api?v=3.0&ak=3HGqGo1RHf***&callback=map_init";document.body.appendChild(load);}window.onload = map_load;

5.回调封装函数+自动定位

getBdGeo();定位封装函数；
marker.addEventListener('dragend', function () {},监听标注事件，手动调整景点
getCurrentPosition，加载即自动采集当前位置的经纬度信息和城市地址信息；

 //初始化地图;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('无法获取定位，系统将自动定位，错误码：' + this.getStatus(), {icon: 2, time: 1000}, function () {map.centerAndZoom("杭州", 17); //用城市名设置地图中心点})}}, function (error) {console.log(error);}, {enableHighAccuracy: true,//是否要求高精度的地理位置信息timeout: 1000,//对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误maximumAge: 0//设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃});}}

二、微信小程序核心代码

1.lnglat.wxml

通过web-view 组件直接嵌入H5地址。

https://test.com/,必须完成备案，必须在微信小程序后台绑定业务域名；
小程序内使用web-view组件嵌套H5页面，当H5页面更换了内容后，小程序里的h5页面不更新的处理方案：增加时间戳?timestamp={{timestamp}}

<web-view src="https://test.com/data/lnglat.html?timestamp={{timestamp}}"></web-view>

2.lnglat.js

    /*** 页面的初始数据*/data: {timestamp: '${new Date().getTime()}'},

3.lnglat.json

导航栏设置

{"usingComponents": {},"navigationBarTitleText": "漏刻有时地理信息","navigationBarBackgroundColor": "#16baaa","navigationBarTextStyle": "white"
}

三、版本发布遇见的问题

版本发布过程中，某些组件或API需要在app.json中配置或者提前申请，按照发布时的提醒，逐步操作即可。

@漏刻有时

微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)相关推荐

微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
微信小程序学习实录一.wxml文档二.新建页面快捷方式三.微信小程序引入weui 四.双向数据绑定 1.wxml渲染层 2.js逻辑层提交表单到后端五.微信小程序跳转到H5 一.wxml文档 ...
微信H5页面，返回上一页面后页面不会自动刷新
最近在做微信公众号中的功能,有发现一个问题,就是微信H5页面中,有时候返回上一页后页面不会自动刷新,这样子就有可能造成页面数据更新不及时在网上搜索后发现一个解决办法,使用window监听pageSh ...
安卓java百度地图api文档_Android调用百度地图API 实时定位代码
[java]代码库package yu.hong.map; import com.baidu.mapapi.BMapManager; import com.baidu.mapapi.GeoPoint; ...
3208点阵时钟c语言程序,点阵万年历(带时间、年月日星期调整及闹钟功能)C程序...
/*此程序是一款用3216点阵屏与DS1302芯片以及三个按键与STC12C5204AD 4KROM单片机组合成的万年历电子钟具体功能如下:正常情况下上半屏 (3208)显示主时间.当第1次按下功 ...
android相机采集sdk,C#用basler相机sdk采集图像并用halcon显示的小程序
C#用basler相机sdk采集图像并用halcon显示的小程序 C#用basler相机sdk采集图像并用halcon显示的小程序本人在用halcon做图像处理做视觉项目时,通常都是用c#写程序的主 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序授权获取用户当前经纬度位置并转换为具体城市
每日一句激励人心的鸡汤: 认真阅读接口文档, 认真阅读接口文档, 认真阅读接口文档. 微信小程序获取用户当前经纬度位置 getLocation() API文档传送门,查看文档后 ...
小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...
微信小程序学习笔记 ( 小程序主体学习二逻辑层 app.js 扩展高级食用方法)
目录结构上图是我建立的的微信小程序的目录结构主体学习逻辑层(App Service) 小程序开发框架的逻辑层由 JavaScript 编写. 逻辑层将数据进行处理后发送给视图层,同时接受视 ...

微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)

百度经纬度采集

一、H5页面开发

1.手机端外部JS库

2.地图容器

3.数据表单

4.地图加载

5.回调封装函数+自动定位

二、微信小程序核心代码

1.lnglat.wxml

2.lnglat.js

3.lnglat.json

三、版本发布遇见的问题

微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)相关推荐

最新文章

热门文章