WeChat applet learning record 6 (Baidu longitude and latitude collection, manual adjustment of accuracy, H5 embedded applet, Baidu map jsAPI, real-time positioning, H5 update and automatic refresh)

1. H5 page development

1. External JS library on the mobile phone

• viewport, the adaptation of the mobile phone;
• layui, mobile phone interface UI;
• jweixin-1.6.0, API interface file for communication between H5 and WeChat applets

    <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. Map container

 <div class="layui-card">
    <div id="map" style="width: 100%;height: 300px;"></div>
 </div>

3. Data form

<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. Map loading

    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. Callback encapsulation function + automatic positioning

• getBdGeo(); Locating wrapper function;
• marker.addEventListener('dragend', function () {},Listen for annotation events and manually adjust scenic spots
• getCurrentPosition，Loading automatically collects the latitude and longitude information and city address information of the current location;

 //初始化地图;
    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//设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃
            });
        }
    }

2. The core code of the WeChat applet

1.lnglat.wxml

Directly embed the H5 URL through the web-view component.

• https://test.com/, the filing must be completed, and the business domain name must be bound in the background of the WeChat applet;
• Use the web-view component to nest the H5 page in the applet. When the content of the H5 page is changed, the h5 page in the applet will not be updated: add a timestamp?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

Navigation bar settings

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

3. Problems encountered in version release

During the version release process, some components or APIs need to be configured in app.json or applied in advance, just follow the reminder at the time of release and operate step by step.

@leak time sometimes