漏刻有时地理信息系统LOCKGIS主程序配置说明(地图调起弹窗、图像标注、设置最佳视野、指定地图中心、H5获取导航、微信小程序环境识别)

1. 漏刻有时地理信息系统说明文档(LOCKGIS、php后台管理、三端一体PC-H5-微信小程序、百度地图jsAPI二次开发、标注弹窗导航)
2. 漏刻有时地理信息系统LOCKGIS小程序配置说明(web-view组件、服务器域名配置、复制链接和转发功能)
3. 漏刻有时地理信息系统LOCKGIS主程序配置说明(地图调起弹窗、图像标注、指定地图中心、H5获取导航、微信小程序环境识别)

一、地图调起弹窗始终保持在底部

调整导航css中的定位为：position: fixed;

/*导航*/
.navi {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto 0;
    width: 100%;
    height: 200px;
    background-color: #FFF;
    border-radius: 10px 10px 0 0;
    z-index: 99999;
    display: none; /*默认隐藏*/
}

.navi > p {
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid rgba(139, 145, 160, 0.1);
}

.navi > p:nth-child(4) {
    border-top: 1px solid rgba(139, 145, 160, 0.1);
}

绝对定位（position: absolute）和固定定位（position: fixed）是CSS中的两种特殊定位方式。

绝对定位是相对于元素最近的已定位的祖先元素（设置了绝对定位或者相对定位的元素），如果没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（html）。绝对定位的元素不占空间，会脱离文档流，可以覆盖页面上其他的元素，并且可以通过z-index属性来控制这些层的对方顺序。例如，如果一个元素设置了绝对定位，它会相对于最近的已定位的祖先元素（或者如果没有的话，是html元素）定位，其位置不会受到文档流中其他元素的影响。

固定定位的元素不会随着滚动条的拖动而改变位置，它们的位置在视觉上不会改变。固定定位的元素同样脱离文档流，并且可以通过z-index属性来控制这些层的对方顺序。例如，如果一个元素设置了固定定位，那么无论页面如何滚动，它都会停留在同一的位置。

总结来说，绝对定位和固定定位都允许元素在页面上产生位移，并且脱离正常的文档流。绝对定位是相对于已定位的祖先元素（或html元素）进行定位，而固定定位则是相对于视口进行定位的。

二、设置最佳视野

/*
* 绘制标注
* markerArr，后台坐标数据；
* type，0默认加载，1搜索加载，2圆形区域搜索加载
* */
function getMaker(markerArr, type) {
    var allponits = [];
    for (var i = 0; i < markerArr.length; i++) {
        var p0 = markerArr[i].poi_lon;
        var p1 = markerArr[i].poi_lat;
        var cat = markerArr[i].poi_type;
        if (type == 2) {
            cat = 0;//显示icon0图标
        }
        var txt = markerArr[i].poi_name;
        var pos = new BMap.Point(p0, p1);
        var marker = addMarker(pos, cat, txt);
        addInfoWindow(marker, markerArr[i]);

        //是否显示文本标签;
        if (type == 1 || type == 0 || type == 2) {
            addLabel(pos, txt, cat);
        }
        //是否设置最佳视野POI;
        //allponits.push(pos);
    }
    map.setViewport(allponits);
}

map.setViewport(allponits);这个函数是用来设置地图的视野范围，也就是在地图上显示哪些区域。这个函数的参数是一个数组，这个数组里的元素是Point对象，这些对象代表了地图上的经纬度坐标点。遍历markerArr数组，取出每一个元素中的经纬度信息，生成一个Point对象，然后将这个Point对象加入到allPoints数组中。最后，使用map.setViewport(allPoints)函数，设置地图的视野范围为allPoints数组中所有点构成的区域。

三、指定地图中心

首次加载指定地图中心，搜索时自动调整初始化时的中心点及缩放级别。

/*百度地图API功能
* data,一级数据;
* type,来源是否是搜索0否1是2圆形区域加载;
* */
var map;

function intMap(markerArr, type) {
    map = new BMap.Map("map", {enableMapClick: false});
    if (type == 1) {
        map.centerAndZoom(new window.BMap.Point(markerArr[0].poi_lon, markerArr[0].poi_lat), 13);
    } else {
        map.centerAndZoom(new window.BMap.Point(120.106563, 30.318838), 13);
    }
    map.enableScrollWheelZoom();

    //添加缩放控件
    var ctrlNav = new window.BMap.NavigationControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
    });
    map.addControl(ctrlNav);

    //数据标注;
    getMaker(markerArr, type);

}

map.centerAndZoom方法用于初始化地图，设置初始化时的中心点及缩放级别。该方法接受两个参数，第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图。第二个参数是地图缩放级别，最大为19，最小为0。

四、H5获取导航坐标

//H5获取导航坐标
function getH5Nav(lng, lat, title, address) {
    //console.log(title);
    var lnglat = bd09togcj02(lng, lat);
    //显示导航栏
    $(".navi").css("display", "block");
    $(".navi").html(
        '
+ lat + ',' + lng + '&coord_type=bd09ll&output=html&src=lockdatav\'">百度导航
' +
        '
+ lnglat[0] + ',' + lnglat[1] + '&name=' + address + '&src=lockdatav\'">高德导航
' +
        '
+ lnglat[1] + ',' + lnglat[0] + ';title:' + title + ';addr:' + address + '&referer=myapp\'">腾讯导航
' +
        '
取消
');
}

//隐藏导航菜单;
function cancelMenu() {
    $(".navi").css("display", "none");
}

五、微信小程序环境配置

1.地图调起导航

//地图调起导航
function getNavi(id, lng, lat, name, address) {
    var lnglat = bd09togcj02(lng, lat);
    if (wxApp) {
        wx.miniProgram.redirectTo({
            url: '/pages/detail/detail?fromType=h5&poi_id=' + id + '&lng=' + lnglat[0] + '&lat=' + lnglat[1] + '&name=' + name + '&address=' + address,//跳转回小程序页面,传参
            success: function () {
                console.log('成功跳回小程序')
            },
            fail: function () {
                console.log('跳转回小程序页面失败');
            },
        });
    } else {
        console.log('未在小程序宿主环境');
    }
}

2.返回小程序首页

//返回小程序首页
function getMiniIndex() {
    if (wxApp) {
        wx.miniProgram.redirectTo({
            url: '/pages/lockgis/lockgis',
            success: function () {
                console.log('成功跳回小程序')
            },
            fail: function () {
                console.log('跳转回小程序页面失败');
            },
        });
    }
}

六、H5与微信调用页

主要是通过不同默认页来适应不同环境，调用各级菜单。

1.H5默认页

https//test.com/app.php

https//test.com/app.php?m=Index&a=rooted

2.微信小程序默认页

https//test.com/app.php?m=Index&a=mini

---

@漏刻有时