286 lines
9.8 KiB
HTML
286 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
}
|
|
|
|
html.theme-dark {
|
|
-webkit-filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
|
|
filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
|
|
}
|
|
|
|
body {
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
font-size: 14px;
|
|
color: #303133;
|
|
}
|
|
|
|
#map-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
|
|
</style>
|
|
<script>
|
|
class AmapPickup {
|
|
constructor(containerId) {
|
|
this.containerId = containerId;
|
|
this.map = null;
|
|
this.circle = null;
|
|
this.marker = null;
|
|
this.centerPoint = null;
|
|
this.isFirstClick = true;
|
|
this.params = {
|
|
theme: 'light', // 主题风格，light|dark
|
|
key: null, // 高德地图 API Key
|
|
point: null, // 初始坐标，如：116.404,39.915
|
|
radius: 300, // 圆形半径
|
|
zoom: 16, // 地图缩放级别
|
|
}
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
// 先初始化参数
|
|
this.initParams();
|
|
|
|
// 如果没有 key，直接返回
|
|
if (!this.params.key) {
|
|
console.error('未提供高德地图 API Key');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 等待地图 JS 加载完成
|
|
await this.loadMapScript();
|
|
// 初始化地图
|
|
this.initMap();
|
|
} catch (error) {
|
|
console.error('加载高德地图失败：', error);
|
|
}
|
|
}
|
|
|
|
initParams() {
|
|
// 获取当前URL的查询参数
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
// 遍历 params 对象的所有属性
|
|
Object.keys(this.params).forEach(key => {
|
|
// 从 URL 参数中获取值
|
|
const value = urlParams.get(key);
|
|
if (value !== null) {
|
|
// 根据参数类型进行转换
|
|
switch (key) {
|
|
case 'radius':
|
|
// 转换为数字
|
|
this.params[key] = parseInt(value) || 300;
|
|
break;
|
|
case 'point':
|
|
// 转换为坐标数组
|
|
const [lng, lat] = value.replace(/[|-]/, ',').split(',').map(parseFloat);
|
|
if (lng && lat) {
|
|
this.params[key] = {lng, lat};
|
|
}
|
|
break;
|
|
default:
|
|
// 字符串类型直接赋值
|
|
this.params[key] = value;
|
|
}
|
|
}
|
|
});
|
|
|
|
// 设置主题风格
|
|
if (!['dark', 'light'].includes(this.params.theme)) {
|
|
this.params.theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
document.documentElement.classList.add(`theme-${this.params.theme}`);
|
|
document.body.style.backgroundColor = "#ffffff";
|
|
}
|
|
|
|
// 初始化地图
|
|
initMap() {
|
|
this.map = new AMap.Map(this.containerId, {
|
|
zoom: this.params.zoom,
|
|
center: this.params.point ? [this.params.point.lng, this.params.point.lat] : [116.404, 39.915],
|
|
enableMapClick: true
|
|
});
|
|
|
|
if (this.params.point) {
|
|
this.centerPoint = [this.params.point.lng, this.params.point.lat];
|
|
this.handleMapClick({lnglat: {lng: this.params.point.lng, lat: this.params.point.lat}});
|
|
} else {
|
|
this.centerPoint = [116.404, 39.915];
|
|
}
|
|
|
|
this.bindEvents();
|
|
}
|
|
|
|
bindEvents() {
|
|
this.map.on('click', (e) => this.handleMapClick(e));
|
|
|
|
// 监听父页面消息
|
|
window.addEventListener('message', (event) => {
|
|
if (event.data.action === 'update_radius') {
|
|
const newRadius = parseInt(event.data.radius);
|
|
if (newRadius && newRadius >= 50 && newRadius <= 5000) {
|
|
this.params.radius = newRadius;
|
|
if (this.circle) {
|
|
this.updateMarkerAndCircle();
|
|
this.updateInfoPanel();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
handleMapClick(e) {
|
|
this.centerPoint = [e.lnglat.lng, e.lnglat.lat];
|
|
|
|
if (this.isFirstClick) {
|
|
this.createMarkerAndCircle();
|
|
this.isFirstClick = false;
|
|
} else {
|
|
this.params.radius = this.circle.getRadius();
|
|
this.updateMarkerAndCircle();
|
|
}
|
|
|
|
this.updateInfoPanel();
|
|
}
|
|
|
|
createMarkerAndCircle() {
|
|
this.createMarker();
|
|
this.createCircle();
|
|
}
|
|
|
|
createMarker() {
|
|
if (this.marker) {
|
|
this.map.remove(this.marker);
|
|
}
|
|
this.marker = new AMap.Marker({
|
|
position: this.centerPoint,
|
|
map: this.map
|
|
});
|
|
}
|
|
|
|
createCircle() {
|
|
if (this.circle) {
|
|
this.map.remove(this.circle);
|
|
}
|
|
this.circle = new AMap.Circle({
|
|
center: this.centerPoint,
|
|
radius: this.params.radius,
|
|
strokeColor: "#FF0000",
|
|
strokeWeight: 2,
|
|
strokeOpacity: 0.5,
|
|
fillColor: "#FF0000",
|
|
fillOpacity: 0.2,
|
|
map: this.map
|
|
});
|
|
}
|
|
|
|
updateMarkerAndCircle() {
|
|
if (this.marker) {
|
|
this.map.remove(this.marker);
|
|
}
|
|
if (this.circle) {
|
|
this.map.remove(this.circle);
|
|
}
|
|
|
|
this.createMarker();
|
|
this.createCircle();
|
|
}
|
|
|
|
updateInfoPanel() {
|
|
const currentRadius = this.circle ? this.circle.getRadius().toFixed(0) : this.params.radius.toString();
|
|
const data = {
|
|
longitude: this.centerPoint[0].toFixed(6),
|
|
latitude: this.centerPoint[1].toFixed(6),
|
|
radius: currentRadius
|
|
}
|
|
|
|
// 发送消息给父页面
|
|
window.parent.postMessage(Object.assign(data, {
|
|
action: "amap_lbs_select_point",
|
|
}), "*");
|
|
}
|
|
|
|
// 获取当前选择的数据
|
|
getData() {
|
|
if (!this.circle) return null;
|
|
|
|
return {
|
|
center: {
|
|
lng: this.centerPoint[0],
|
|
lat: this.centerPoint[1]
|
|
},
|
|
radius: this.circle.getRadius()
|
|
};
|
|
}
|
|
|
|
// 设置中心点和半径
|
|
setData(lng, lat, radius) {
|
|
this.centerPoint = [lng, lat];
|
|
this.params.radius = radius || this.params.radius;
|
|
|
|
if (this.isFirstClick) {
|
|
this.createMarkerAndCircle();
|
|
this.isFirstClick = false;
|
|
} else {
|
|
this.updateMarkerAndCircle();
|
|
}
|
|
|
|
this.updateInfoPanel();
|
|
this.map.setCenter(this.centerPoint);
|
|
}
|
|
|
|
loadMapScript() {
|
|
return new Promise((resolve, reject) => {
|
|
// 如果已经加载过，直接返回
|
|
if (window.AMap) {
|
|
resolve();
|
|
return;
|
|
}
|
|
|
|
// 创建script标签
|
|
const script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${this.params.key}&callback=initAmapMap`;
|
|
|
|
// 添加回调函数
|
|
window.initAmapMap = () => {
|
|
resolve();
|
|
delete window.initAmapMap;
|
|
};
|
|
|
|
// 处理加载错误
|
|
script.onerror = () => {
|
|
reject(new Error('高德地图脚本加载失败'));
|
|
};
|
|
|
|
// 添加到页面
|
|
document.body.appendChild(script);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 页面加载完成后初始化
|
|
window.onload = function () {
|
|
window.pickup = new AmapPickup("map-container");
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="map-container"></div>
|
|
</body>
|
|
</html> |