<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>