高德地图插件的简单使用-阿里云开发者社区

高德地图插件的简单使用

2023-07-11 126

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 高德地图插件的简单使用

1：首先是资源

高德开放平台 | 高德地图API (amap.com)

点进去后>点击控制台登录

2：点击开发支持会有详细的入门这里就不一一解释了

3：工具

坐标拾取器：可以帮你解决不知道地图的坐标问题

其他的就是生成地图的

下面是一个简单的地图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=346e4aa4dc6444f5a7f69bf1ff66ca1a"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            height: 100vh;
        }
        /* .qwe {} */
    </style>
</head>
<body>
    <div id="container">
    </div>
</body>
<script>
    var map = new AMap.Map('container', {
        zoom: 16,//级别
        center: [113.978255, 35.281454],//中心点坐标
        viewMode: '3D'//使用3D视图
    });
    let data = [
        {
            name: "十点半",
            tel: 123456789,
            posi: [113.98, 35.28]
        }, {
            name: "阿迪斯",
            tel: 45678909876,
            posi: [113.92, 35.29]
        }, {
            name: "盎司九百",
            tel: 0987656789876,
            posi: [113.93, 35.28]
        }
    ]
    for (let i = 0; i < data.length; i++) {
        // 以 icon URL 的形式创建一个途经点
        var viaMarker = new AMap.Marker({
            position: new AMap.LngLat(data[i].posi[0], data[i].posi[1]),
            // 将一张图片的地址设置为 icon
            icon: './img/位置.png',
            // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
            offset: new AMap.Pixel(-13, -30)
        });
        viaMarker.on('click', function () {
            infoWindow = new AMap.InfoWindow({
                content: `
            <div class="qwe">
                <h3>${data[i].name}</h3>
                <p>tel:${data[i].tel}</p>
                </div>
            `,
                offset: new AMap.Pixel(4, 0)
            });
            infoWindow.open(map, data[i].posi);
        })// 将 markers 添加到地图
        map.add(viaMarker);
    }
</script>
</html>