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