138 lines
4.1 KiB
HTML
138 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>地图</title>
|
|||
|
|
<!-- 天地图API -->
|
|||
|
|
<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=e8a16137fd226a62a23cc7ba5c9c78ce" type="text/javascript"></script>
|
|||
|
|
<style>
|
|||
|
|
html, body { height: 100%; margin: 0; padding: 0; }
|
|||
|
|
#mapDiv { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body onload="onLoad()">
|
|||
|
|
<div id="mapDiv"></div>
|
|||
|
|
</body>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var map;
|
|||
|
|
var zoom = 14;
|
|||
|
|
var currentMarker = null;
|
|||
|
|
|
|||
|
|
function getUrlParam(name) {
|
|||
|
|
if (window.__injectedParams && window.__injectedParams[name] !== undefined) {
|
|||
|
|
return window.__injectedParams[name].toString();
|
|||
|
|
}
|
|||
|
|
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 = "https://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";
|
|||
|
|
var lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
|
|||
|
|
var config = {layers: [lay]};
|
|||
|
|
map = new T.Map("mapDiv", config);
|
|||
|
|
|
|||
|
|
var initLng = parseFloat(getUrlParam('longitude'));
|
|||
|
|
var initLat = parseFloat(getUrlParam('latitude'));
|
|||
|
|
if (isNaN(initLng) || isNaN(initLat) || initLng === 0 || initLat === 0) {
|
|||
|
|
initLng = 116.397428;
|
|||
|
|
initLat = 39.90923;
|
|||
|
|
}
|
|||
|
|
map.centerAndZoom(new T.LngLat(initLng, initLat), zoom);
|
|||
|
|
map.enableScrollWheelZoom();
|
|||
|
|
|
|||
|
|
// 始终开启点击标点功能
|
|||
|
|
addMapClick();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addMapClick() {
|
|||
|
|
map.addEventListener("click", MapClick);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function MapClick(event) {
|
|||
|
|
var lng = event.lnglat.getLng();
|
|||
|
|
var lat = event.lnglat.getLat();
|
|||
|
|
|
|||
|
|
// 清除旧标记并添加新标记（使用默认图标）
|
|||
|
|
map.clearOverLays();
|
|||
|
|
var marker = new T.Marker(new T.LngLat(lng, lat));
|
|||
|
|
map.addOverLay(marker);
|
|||
|
|
|
|||
|
|
// 保存选中位置
|
|||
|
|
window.selectedLocation = {
|
|||
|
|
longitude: lng,
|
|||
|
|
latitude: lat
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 发送位置信息给 Flutter
|
|||
|
|
sendLocationToFlutter(lat, lng);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function sendLocationToFlutter(lat, lng) {
|
|||
|
|
var payload = {
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
latitude: lat,
|
|||
|
|
longitude: lng
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Flutter WebView 桥接
|
|||
|
|
if (typeof window.flutterPostMessage === 'function') {
|
|||
|
|
window.flutterPostMessage(payload);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 备用桥接方法（uniapp 或小程序）
|
|||
|
|
uni.getEnv(function (res) {
|
|||
|
|
if (res.plus) {
|
|||
|
|
uni.postMessage({ data: { "longitude": lng, "latitude": lat } });
|
|||
|
|
} else {
|
|||
|
|
if (window.wx && window.wx.miniProgram) {
|
|||
|
|
try {
|
|||
|
|
window.wx.miniProgram.postMessage({ data: { "longitude": lng, "latitude": lat } });
|
|||
|
|
window.wx.miniProgram.navigateBack();
|
|||
|
|
} catch(e) {
|
|||
|
|
console.log('wx miniProgram error', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Flutter 获取选中位置的方法
|
|||
|
|
function getSelectedLocation() {
|
|||
|
|
try {
|
|||
|
|
if (window.selectedLocation) {
|
|||
|
|
return window.selectedLocation;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log('getSelectedLocation error', e);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Flutter 调用，设置地图中心和标记
|
|||
|
|
function setLocation(lng, lat) {
|
|||
|
|
try {
|
|||
|
|
map.centerAndZoom(new T.LngLat(lng, lat), zoom);
|
|||
|
|
var marker = new T.Marker(new T.LngLat(lng, lat));
|
|||
|
|
map.clearOverLays();
|
|||
|
|
map.addOverLay(marker);
|
|||
|
|
window.selectedLocation = { longitude: lng, latitude: lat };
|
|||
|
|
return true;
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log('setLocation error', e);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</html>
|