DeepSeek代码之旅1:卫星地图标记方法之——html语言的实现

最近遇到一个任务，具体功能如下：

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>
    


    
    
        
            经度
            
        
        
        
            纬度
            
        

        
            标记名称
            
        
        
        
        
        
        
        
        导入JSON文件
     

    
    
        
        点击地图获取坐标：未记录
    

<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文件同一目录下），添加标记功能、搜索标记功能、清楚标记功能、导出标记功能、加载标记功能。

相关推荐

django留言板_留言板html好看的模板

一次分享给你29个PHP基础常用类助力你快速提升

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一篇文章轻松掌握VLookup、XLookup与Filter函数

新函数FILTER函数_filter函数的作用

初学ThinkPHP(一):用TP6+LayUI实现数据表格

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

Excel筛选也智能?一个FILTER函数就搞定!

营商在上海_营商上海数字科技有限公司