高德地图标记

需求：公司需要在网站上显示各个加盟店的位置。

思路：使用经纬度在高德地图上显示各店的位置信息。

步骤：

打开高德开放平台（https://lbs.amap.com/）申请一个 < Web端（JS API)>的密钥。

在页面中引入高德地图

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=KEY值"></script>

使用高德的 AMap.Marker来完成

<script type="text/javascript">
    let map = new AMap.Map('homeMap', { // 
        mapStyle: 'amap://styles/blue', //地图主题样式
        resizeEnable: true,
        center: [104.153362,31.726344],//地图中心位置
        zoom: 4,//缩放级别
        zooms: [4, 15]//缩放级别范围
    });

    map.clearMap();  // 清除地图覆盖物

    let markers = [];
    $.each([{"id": 1, "name": "门店1", "lat":"120.564351", "lon":"32.595475"}], function(index, item) {
        let icon_position = "/icon/offline.png";//定义显示图标
        if (item.runStatus == 'online'){
            icon_position = "/icon/online.png";
        }

        markers.push({
            icon: icon_position,
            position: [item.lat, item.lon],
            label: {
                offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                content: '<div style="position: relative;margin:0;top: 0;right: 0;min-width: 0;">' + item.name + '</div>', //设置文本标注内容
                direction: 'right' //设置文本标注方位
            }
        });
    });

    // 添加一些站点到地图上
    markers.forEach(function(marker) {
        new AMap.Marker({
            map: map,
            title: marker.title,
            icon: marker.icon,
            anchor: 'center',
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(0, 0),
            label: marker.label
        });
    });
</script>

案例

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>标题</title>
    <meta name="keywords" content="关键字">
    <meta name="description" content="描述">
    <script type="text/javascript" src="/static/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=KEY值"></script>
    <style>
        .amap {
            width: 800px;
            height: 500px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <h2>高德地图</h2>
    <div class="amap" id="homeMap"></div>
    <script type="text/javascript">
        let map = new AMap.Map('homeMap', {
            mapStyle: 'amap://styles/blue',
            resizeEnable: true,
            center: [104.153362,31.726344],
            zoom: 4,
            zooms: [4, 15]
        });

        map.clearMap();  // 清除地图覆盖物

        let markers = [];
        $.each([
            {"id": 1, "name": "门店1", "lat":"120.564351", "lon":"32.595475", "stauts": 1},
            {"id": 2, "name": "门店2", "lat":"120.564351", "lon":"22.595475", "stauts": 2},
            ], function(index, item) {
            
            let icon_position = "/icon/shop2.png";
            if (item.stauts == 1){
                icon_position = "/icon/shop.png";
            }

            markers.push({
                icon: icon_position,
                position: [item.lat, item.lon],
                label: {
                    offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                    content: '<div style="position: relative;margin:0;top: 0;right: 0;min-width: 0;">' + item.name + '</div>', //设置文本标注内容
                    direction: 'right' //设置文本标注方位
                }
            });
        });

        // 添加一些站点到地图上
        markers.forEach(function(marker) {
            new AMap.Marker({
                map: map,
                title: marker.title,
                icon: marker.icon,
                anchor: 'center',
                position: [marker.position[0], marker.position[1]],
                offset: new AMap.Pixel(0, 0),
                label: marker.label
            });
        });
    </script>
</body>
</html>

View Code

结语

　　高德地图 API 还有很多玩法，有时间还是需要多多研究。

posted @ 2024-07-15 11:05 梦缘&江南~ 阅读(189) 评论(0) 收藏举报

刷新页面返回顶部

梦缘&江南~

高德地图标记

公告