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> |