2023-12-14 16:44:35 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2023-12-14 17:33:37 +08:00
|
|
|
<title>地图</title>
|
2023-12-14 16:44:35 +08:00
|
|
|
</head>
|
|
|
|
|
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=e8a16137fd226a62a23cc7ba5c9c78ce" type="text/javascript">
|
|
|
|
|
</script>
|
|
|
|
|
<script src="./js/uni.webview.1.5.4.js"></script>
|
|
|
|
|
<body onLoad="onLoad()">
|
|
|
|
|
<div id="mapDiv" style="position:absolute;width:100vw; height:100vh"></div>
|
|
|
|
|
</body>
|
|
|
|
|
<style>
|
|
|
|
|
* {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
var map;
|
|
|
|
|
var zoom = 14;
|
|
|
|
|
|
|
|
|
|
function getUrlParam(name) {
|
|
|
|
|
const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
|
|
|
|
const r = window.location.search.substr(1).match(reg);
|
|
|
|
|
if (r != null) return decodeURI(r[2]);
|
|
|
|
|
return "";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onLoad() {
|
|
|
|
|
var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
|
|
|
|
|
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
|
|
|
|
|
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce";
|
|
|
|
|
lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
|
|
|
|
|
var config = {layers: [lay]};
|
|
|
|
|
map = new T.Map("mapDiv", config);
|
|
|
|
|
map.centerAndZoom(new T.LngLat(getUrlParam('longitude'), getUrlParam('latitude')), zoom);
|
|
|
|
|
map.enableScrollWheelZoom();
|
|
|
|
|
addMapClick()
|
|
|
|
|
}
|
|
|
|
|
function addMapClick() {
|
|
|
|
|
map.addEventListener("click", MapClick);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function MapClick(event) {
|
|
|
|
|
var marker = new T.Marker(new T.LngLat(event.lnglat.getLng(), event.lnglat.getLat()));
|
|
|
|
|
map.clearOverLays();
|
|
|
|
|
map.addOverLay(marker);
|
|
|
|
|
console.log(event.lnglat.getLng(), event.lnglat.getLat());
|
|
|
|
|
uni.postMessage({
|
|
|
|
|
data: {
|
|
|
|
|
"longitue": event.lnglat.getLng(),
|
|
|
|
|
"latitude": event.lnglat.getLat(),
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
