高德地图插件的使用

最新推荐文章于 2025-05-04 14:29:07 发布

smallmww

最新推荐文章于 2025-05-04 14:29:07 发布

阅读量269

点赞数

分类专栏：前端文章标签： html5 javascript css

本文链接：https://blog.csdn.net/smallmww/article/details/132200707

版权

前端专栏收录该内容

39 篇文章

订阅专栏

<!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;
        }
    </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>