156 lines
6.0 KiB
HTML
156 lines
6.0 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|||
|
|
<style type="text/css">
|
|||
|
|
body,html {width: 100%;height: 800px; margin: 0;}
|
|||
|
|
#allmap {height: 800px; width: 100%;overflow: hidden;}
|
|||
|
|
</style>
|
|||
|
|
<!-- 引入百度地图api 携带 AK -->
|
|||
|
|
<script type="text/javascript"
|
|||
|
|
src="https://api.map.baidu.com/getscript?v=3.0&&type=webgl&ak=PGWaYTMyboEEQGINvL1Oi9qpFlwKbFGB">
|
|||
|
|
</script>
|
|||
|
|
<!-- 引入搜索功能 -->
|
|||
|
|
|
|||
|
|
<!-- 引入 uni-app 的 SDK -->
|
|||
|
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
|
|||
|
|
<title>获取位置中，请稍后</title>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!-- 顶部搜索栏 -->
|
|||
|
|
<!-- <div id="search">
|
|||
|
|
<div id="r-result"><input type="text" id="suggestId" size="20" placeholder="位置搜索" value="百度"
|
|||
|
|
style="width:100%;height:40px;" /></div>
|
|||
|
|
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
|
|||
|
|
</div> -->
|
|||
|
|
<!-- 地图 -->
|
|||
|
|
<div id="allmap"></div>
|
|||
|
|
<!-- 选中的位置回显 -->
|
|||
|
|
<!-- <div id="result">
|
|||
|
|
<div id="resultText"></div>
|
|||
|
|
<div class="btn">重新定位</div>
|
|||
|
|
</div> -->
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var map = new BMapGL.Map('allmap');
|
|||
|
|
var poi = new BMapGL.Point(116.307852, 40.057031); //罗马的坐标
|
|||
|
|
|
|||
|
|
var addressPost; //存储附近信息数据
|
|||
|
|
var CURRENT_LNG; //记录坐标
|
|||
|
|
var CURRENT_LAT; //记录坐标
|
|||
|
|
var lng, lat; //记录坐标
|
|||
|
|
|
|||
|
|
map.centerAndZoom(poi, 18); //设置地图中心点 和 缩放等级
|
|||
|
|
map.enableScrollWheelZoom();//开启鼠标滚轮
|
|||
|
|
|
|||
|
|
function G(id) {
|
|||
|
|
return document.getElementById(id);
|
|||
|
|
}
|
|||
|
|
//获取当前位置附近地址信息 --- geoc.getLocation
|
|||
|
|
var geoc = new BMapGL.Geocoder();
|
|||
|
|
var getCurrentLocation = function (lg, lt) {
|
|||
|
|
//geoc.getLocation 获取到 坐标 以及 包含附近地址信息的数组
|
|||
|
|
geoc.getLocation(new BMapGL.Point(lg, lt), function (rs) {
|
|||
|
|
//取数组第一个地址信息为选中的位置，也可现为地址列表
|
|||
|
|
var nearbyAddeessArr = rs.surroundingPois[0];
|
|||
|
|
// document.getElementById('resultText').innerText = '当前位置 ：' + nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;
|
|||
|
|
addressPost = nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;
|
|||
|
|
CURRENT_LNG = lg;
|
|||
|
|
CURRENT_LAT = lt;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//通过浏览器获取当前定位的坐标
|
|||
|
|
let getCurrent = () => {
|
|||
|
|
var geolocation = new BMapGL.Geolocation();
|
|||
|
|
geolocation.getCurrentPosition(function (r) {
|
|||
|
|
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
|
|||
|
|
var mk = new BMapGL.Marker(r.point);
|
|||
|
|
map.addOverlay(mk);
|
|||
|
|
map.panTo(r.point);
|
|||
|
|
lng = r.point.lng
|
|||
|
|
lat = r.point.lat
|
|||
|
|
getCurrentLocation(lng, lat)
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
alert('failed' + this.getStatus());
|
|||
|
|
}
|
|||
|
|
}, { enableHighAccuracy: true })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getCurrent()
|
|||
|
|
|
|||
|
|
|
|||
|
|
//给地图添加点击事件 标记 marker
|
|||
|
|
map.addEventListener("touchstart", function (e) {
|
|||
|
|
map.clearOverlays();//清除地图上所有覆盖物 marker
|
|||
|
|
//获取坐标
|
|||
|
|
var lng = e.point.lng;
|
|||
|
|
var lat = e.point.lat;
|
|||
|
|
|
|||
|
|
//创建marker标注位置
|
|||
|
|
var pt = new BMap.Point(lng, lat);
|
|||
|
|
//new BMap.Icon("本地marker图标路径",图标的尺寸,{marker偏移量,窗口的偏移量})
|
|||
|
|
var myIcon = new BMapGL.Icon("本地marker图标路径", new BMap.Size(20, 25), { anchor: new BMap.Size(5, 20), infoWindowAnchor: new BMap.Size(10, 0) });
|
|||
|
|
var marker2 = new BMapGL.Marker(pt, { icon: myIcon }); // 创建标注实例
|
|||
|
|
map.addOverlay(marker2); //将标注添加到地图中
|
|||
|
|
getCurrentLocation(lng, lat)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 以下是地点检索功能
|
|||
|
|
|
|||
|
|
//创建一个search实例
|
|||
|
|
// var ac = new BMapGL.Autocomplete(
|
|||
|
|
// {
|
|||
|
|
// "input": "suggestId",
|
|||
|
|
// "location": map
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
|
|||
|
|
// var myValue;//存储地址检索结果
|
|||
|
|
// ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
|
|||
|
|
// var _value = e.item.value;
|
|||
|
|
// myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
|
|||
|
|
// G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
|
|||
|
|
// setPlace();
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// 地图移动到检索的位置，并且标记
|
|||
|
|
// function setPlace() {
|
|||
|
|
// map.clearOverlays(); //清除地图上所有覆盖物
|
|||
|
|
// function myFun() {
|
|||
|
|
// var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
|
|||
|
|
// map.centerAndZoom(pp, 18);
|
|||
|
|
// map.addOverlay(new BMapGL.Marker(pp)); //添加标注
|
|||
|
|
// getCurrentLocation(pp.lng, pp.lat)
|
|||
|
|
// }
|
|||
|
|
// var local = new BMapGL.LocalSearch(map, { //智能搜索
|
|||
|
|
// onSearchComplete: myFun
|
|||
|
|
// });
|
|||
|
|
// local.search(myValue);
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
//确定地址 将数据传输到 uniapp 的 webview内
|
|||
|
|
document.addEventListener('UniAppJSBridgeReady', function () {
|
|||
|
|
if (addressPost != undefined) {
|
|||
|
|
uni.postMessage({
|
|||
|
|
data: {
|
|||
|
|
position: addressPost,
|
|||
|
|
jd: CURRENT_LNG,
|
|||
|
|
wd: CURRENT_LAT
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//uniapp 挂载完毕，在内部可以使用uniapp 部分 api,具体看 官方文档 webview
|
|||
|
|
// document.querySelector('.btn').addEventListener('touchstart', function () {
|
|||
|
|
// map.clearOverlays()
|
|||
|
|
// getCurrent()
|
|||
|
|
// })
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|