最近遇到一个任务，具体功能如下：
1、调用高德地图API，图层为卫星图层，根据需要标记兴趣点；
2、标记完成后可以保存兴趣点，便于下次加载历史兴趣点。
目前DeepSeek是非常的火爆啊，听说写代码还不错，那就赶紧把需求跟它说说吧，首先我们得告诉它使用什么语言去实现什么功能，我提问如下：
使用HTML语言，实现在线高德卫星地图api多点标记功能，具体实现如下：HTML界面中添加功能区、显示区。
1、功能区：靠左，文本框 1 显示“经度”、经度输入框 1（经度）（鼠标点击自动获取）、文本框 2 显示“纬度”、经度输入框 2（纬度）（鼠标点击自动获取）、标记点文本框显示“标记点名称”、标记点名称输入框，添加标记按钮、搜索标记按钮、清楚所有标记按钮、导出标记按钮、加载本地标记按钮；
2、显示区：靠右，显示地图它直接给出了解决方案，并得到html代码示例：
高德地图多点标记系统
<script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图Key"></script>
<script>
let map = null;
let markers = [];
// 初始化地图
function initMap() {
map = new AMap.Map('map-container', {
zoom: 12,
center: [116.397428, 39.90923],
layers: [new AMap.TileLayer.Satellite()]
});
// 地图点击事件
map.on('click', function(e) {
document.getElementById('longitude').value = e.lnglat.getLng();
document.getElementById('latitude').value = e.lnglat.getLat();
});
}
// 添加标记
function addMarker() {
const lng = parseFloat(document.getElementById('longitude').value);
const lat = parseFloat(document.getElementById('latitude').value);
const name = document.getElementById('marker-name').value;
if (isNaN(lng) || isNaN(lat)) return;
const marker = new AMap.Marker({
position: [lng, lat],
title: name,
map: map
});
markers.push({
name: name,
lng: lng,
lat: lat,
marker: marker
});
}
// 搜索标记
function searchMarker() {
const name = prompt("请输入要搜索的标记名称：");
const target = markers.find(m => m.name === name);
if (target) {
map.setCenter([target.lng, target.lat]);
map.setZoom(17);
}
}
// 清除所有标记
function clearMarkers() {
markers.forEach(m => m.marker.setMap(null));
markers = [];
}
// 导出标记
function exportMarkers() {
const data = JSON.stringify(markers.map(m => ({
name: m.name,
lng: m.lng,
lat: m.lat
})));
const blob = new Blob([data], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'markers.json';
a.click();
}
// 文件读取
document.getElementById('file-input').addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const data = JSON.parse(event.target.result);
data.forEach(item => {
document.getElementById('longitude').value = item.lng;
document.getElementById('latitude').value = item.lat;
document.getElementById('marker-name').value = item.name;
addMarker();
});
};
reader.readAsText(file);
});
// 初始化
window.onload = initMap;
</script>
我们直接将代码复制到vscode中（没有可以安装）方便代码修改，直接浏览器打开肯定是异常的！浏览器打开如下：
要想正常使用地图功能，首先我们要去高德开放平台（https://lbs.amap.com/）申请权限，如下图中控制台中申请得到key和安全密钥(创建新应用—>添加key—>选择web端)：
高德开放平台
创建应用并添加key
选择web端
确定后得到key
我们将得到的key替换掉html代码中的位置：
刷新后发现可以正常显示了，但是标记点无法显示，根据不断的调试和优化得到最终的html代码：
地图标记点管理系统
<script src="https://webapi.amap.com/loader.js"></script>
点击地图获取坐标：未记录
<script>
// 高德地图初始化
let map;
let markers = [];
const AMapKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // 替换为真实Key
// 页面元素
const longitudeInput = document.getElementById('longitude');
const latitudeInput = document.getElementById('latitude');
const markerNameInput = document.getElementById('marker-name');
// 初始化地图
window.onload = function() {
AMapLoader.load({
key: AMapKey,
version: "2.0",
plugins: ['AMap.Scale', 'AMap.ToolBar']
}).then((AMap) => {
map = new AMap.Map('mapContainer', {
layers: [new AMap.TileLayer.Satellite()],
zoom: 13,
center: [108.378925, 22.842527]
});
// 添加控件
map.addControl(new AMap.Scale());
map.addControl(new AMap.ToolBar());
// 地图点击事件
map.on('click', function(e) {
const lng = e.lnglat.getLng().toFixed(6);
const lat = e.lnglat.getLat().toFixed(6);
longitudeInput.value = lng;
latitudeInput.value = lat;
document.getElementById('coordinates').innerHTML =
`点击坐标：经度 ${lng}, 纬度 ${lat}`;
});
});
};
// 添加标记函数
function addMarker(lng, lat, title) {
if (!map) return;
// 获取当前页面的URL
var currentURL = window.location.href;
// 提取目录路径
var directoryPath = currentURL.substring(0, currentURL.lastIndexOf('/') + 1);
// 将目录路径显示在页面上
document.getElementById('coordinates').textContent = "当前目录: " + directoryPath;
const marker = new AMap.Marker({
position: [parseFloat(lng), parseFloat(lat)],
map: map,
title: title,
icon: directoryPath + "towerdot.png"
});
// 信息窗口
marker.on('click', () => {
new AMap.InfoWindow({
content: `${title}
经纬度:${lng},${lat}`
}).open(map, marker.getPosition());
});
markers.push(marker);
}
// NEW: 添加文件导入功能
document.getElementById('file-input').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
try {
const importedData = JSON.parse(event.target.result);
// 验证数据格式
if (!Array.isArray(importedData)) {
throw new Error("无效的JSON格式");
}
importedData.forEach(marker => {
if (!marker.lng || !marker.lat || !marker.title) {
throw new Error("缺少必要字段: lng/lat/title");
}
addMarker(marker.lng, marker.lat, marker.title);
});
} catch (error) {
alert(`导入失败: ${error.message}`);
}
};
reader.readAsText(file);
});
// 事件监听
document.getElementById('add-marker').addEventListener('click', () => {
const lng = longitudeInput.value;
const lat = latitudeInput.value;
const title = markerNameInput.value;
if (!lng || !lat) return alert("请先获取或输入坐标！");
if (!title) return alert("请输入标记名称！");
addMarker(lng, lat, title);
markerNameInput.value = ''; // 清空名称输入
});
document.getElementById('search-marker').addEventListener('click', () => {
const keyword = prompt("请输入搜索关键词：");
if (!keyword) return;
const found = markers.find(marker =>
marker.getTitle().includes(keyword)
);
if (found) {
map.setCenter(found.getPosition());
map.setZoom(16);
found.emit('click'); // 触发点击显示信息窗口
} else {
alert("未找到匹配标记！");
}
});
document.getElementById('clear-markers').addEventListener('click', () => {
markers.forEach(marker => marker.setMap(null));
markers = [];
alert("已清除所有标记！");
});
document.getElementById('export-data').addEventListener('click', () => {
const data = markers.map(marker => ({
lng: marker.getPosition().lng,
lat: marker.getPosition().lat,
title: marker.getTitle()
}));
const blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'markers.json';
a.click();
});
</script>
复制上面代码保存为html文件，并将上面代码中AMapKey替换为自己的key后可以得到如下界面：
最终效果
最终实现：自定义标记点图标（图标文件需与html文件同一目录下），添加标记功能、搜索标记功能、清楚标记功能、导出标记功能、加载标记功能。