80 lines
2.3 KiB
HTML
80 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>地图派单示例</title>
|
|
<!-- 使用高德测试 Key -->
|
|
<script src="https://webapi.amap.com/maps?v=2.0&key={$mapkey.amapkey|default=''}"></script>
|
|
<style>
|
|
#map { width: 100%; height: 600px; }
|
|
.info-window {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
window._AMapSecurityConfig = {
|
|
securityJsCode: "{$mapkey.amapsecurityjscode|default=''}",
|
|
}
|
|
|
|
const taskLocation = [104.065735, 30.657201]; // 天府广场
|
|
|
|
const workers = [
|
|
{ name: '张三', phone: '138****1234', position: [104.066, 30.658] },
|
|
{ name: '李四', phone: '139****5678', position: [104.064, 30.656] },
|
|
{ name: '王五', phone: '136****9876', position: [104.067, 30.659] },
|
|
];
|
|
|
|
const map = new AMap.Map('map', {
|
|
zoom: 16,
|
|
center: taskLocation,
|
|
});
|
|
|
|
// 添加任务地点标记（红色）
|
|
const taskMarker = new AMap.Marker({
|
|
position: taskLocation,
|
|
title: '任务地点',
|
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
|
|
label: {
|
|
content: '<span style="color: red; font-weight: bold;">任务点</span>',
|
|
offset: new AMap.Pixel(20, -10)
|
|
}
|
|
});
|
|
map.add(taskMarker);
|
|
|
|
// 添加工人标记（蓝色）
|
|
workers.forEach(worker => {
|
|
const marker = new AMap.Marker({
|
|
position: worker.position,
|
|
title: worker.name,
|
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-blue.png',
|
|
label: {
|
|
content: `<span>${worker.name}</span>`,
|
|
offset: new AMap.Pixel(20, -10)
|
|
}
|
|
});
|
|
|
|
const infoWindow = new AMap.InfoWindow({
|
|
content: `
|
|
<div class="info-window">
|
|
<strong>${worker.name}</strong><br/>
|
|
电话：${worker.phone}<br/>
|
|
<button onclick="alert('已派单给 ${worker.name}')">派单</button>
|
|
</div>`,
|
|
offset: new AMap.Pixel(0, -30)
|
|
});
|
|
|
|
marker.on('click', () => {
|
|
infoWindow.open(map, marker.getPosition());
|
|
});
|
|
|
|
map.add(marker);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|