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

本文主要是介绍漏刻有时地理信息系统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('<p id="baidu" οnclick="location.href=\'https://api.map.baidu.com/geocoder?location=' + lat + ',' + lng + '&coord_type=bd09ll&output=html&src=lockdatav\'"><a>百度导航</a></p>' +'<p id="gaode" οnclick="location.href=\'https://uri.amap.com/marker?position=' + lnglat[0] + ',' + lnglat[1] + '&name=' + address + '&src=lockdatav\'"><a>高德导航</a></p>' +'<p id="tengxun" οnclick="location.href=\'https://apis.map.qq.com/uri/v1/marker?marker=coord:' + lnglat[1] + ',' + lnglat[0] + ';title:' + title + ';addr:' + address + '&referer=myapp\'"><a>腾讯导航</a></p>' +'<p οnclick="cancelMenu();">取消</p>');
}//隐藏导航菜单;
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

---

@漏刻有时

这篇关于漏刻有时地理信息系统LOCKGIS主程序配置说明(地图调起弹窗、图像标注、设置最佳视野、指定地图中心、H5获取导航、微信小程序环境识别)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---