智慧校园--webGIS--高德地图

前端小程

已于 2023-06-29 16:37:44 修改

阅读量402

点赞数

文章标签：前端

于 2023-06-29 16:10:15 首次发布

本文链接：https://blog.csdn.net/cssajbq_/article/details/131458629

版权

该代码示例展示了如何在网页中集成高德地图API，实现在地图上点击打卡功能并记录点击次数。同时，它还提供了驾车路线的规划，当用户点击地图时，会自动生成从起点到终点的驾车路径，并显示经过的点。此外，代码中还包含了地图控件的添加和信息提示框的使用。

摘要由CSDN通过智能技术生成

实现地图点击打卡，驾车路线。

需要自己去高德开发平台注册新建自己的项目保存key和秘钥

<!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>
    <!-- 引入资源 -->
    <!-- 1.高德地图基础css样式 -->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <!-- 2.基础样式 -->
    <link rel="stylesheet" href="./css//a.css">
    <!-- 3.引入地图资源 -->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "自己的秘钥",
        }
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=自己的key"></script>
    <!-- <script src="./js/store.js"></script> -->
</head>

<body>
    <div id="container"></div>
    <!-- 添加类名info、input-item...，使用高德里面的样式 -->
    <div class="info">点击地图标注热门地点</div>
    <div class="input-card" style="width:13rem">
        <h4>推荐；浏览路线</h4>
        <div class="input-item">
            <button class="btn" onclick="startAnimation()">开始动画</button>
        </div>
    </div>
</body>
<script>
    function getData(){
    if(!localStorage.getItem('geojson')){
        localStorage.setItem('geojson','[]')
    }
    return JSON.parse(localStorage.getItem('geojson'))
}
function saveData(data){
    localStorage.setItem('geojson',JSON.stringify(data))
}
    var map = new AMap.Map('container', {
        center: [114.402672, 30.518987],
        zoom: 16,
        viewMode: '3D',
        pitch: 45
    })

    AMap.plugin(['AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        'AMap.MapType',
        'AMap.Geolocation',
        'AMap.ControlBar',
        'AMap.GeoJSON',
        'AMap.MoveAnimation'
    ], function () {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar({
            position: {
                top: '80px',
                right: '25px'
            }
        }));
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.ControlBar());
    })
    // JSON数据

    var geojson = new AMap.GeoJSON({
        geoJSON: null
    })
    if (JSON.stringify(getData()) != '[]') {
        // 导入数据
        geojson.importData(getData())
        // 恢复旧数据点击事件
        geojson.eachOverlay(function (mak) {
            mak.on('click', function (e) {
                // console.log(e.lnglat, '点击了旧数据');
                var ext = mak.getExtData()
                var click = ++ext._geoJsonProperties.click
                console.log('旧数据点击了' + click + '次');
                // 1.使用信息提示框显示
                var infowin = new AMap.InfoWindow({
                    anchor: 'top-center',
                    content: `<div>打卡了${click}次</div>`
                })
                //2. 显示提示框的位置
                infowin.open(map, mak.getPosition())
                saveData(geojson.toGeoJSON())

            })

        })
    }
    map.add(geojson)

    // 地图点击事件添加标注
    function handler(e) {
        var marker = new AMap.Marker({
            position: e.lnglat,
            extData: {
                _geoJsonProperties: {
                    gid: geojson.getOverlays().length + 1,
                    click: 0
                }
            }
        })
        // map.add(marker)
        // 覆盖物的点击事件
        marker.on('click', function (e) {
            // console.log(e.lnglat, '点击了');
            var ext = marker.getExtData()
            var click = ++ext._geoJsonProperties.click
            console.log('点击了' + click + '次');
            saveData(geojson.toGeoJSON())
            // 1.使用信息提示框显示
            var infowin = new AMap.InfoWindow({
                anchor: 'top-center',
                content: `<div>打卡了${click}次</div>`
            })
            //2. 显示提示框的位置
            infowin.open(map, marker.getPosition())
        })
        // 通过geojson对象来管理覆盖物、显示点
        geojson.addOverlay(marker)
        // 保存数据(将geojson对象转换成标准的GeoJSON格式对象)
        saveData(geojson.toGeoJSON())
    }
    map.on('click', handler) //地图点击事件调用
    //开始动画
    function startAnimation() {
        AMap.plugin(["AMap.Driving"], function () {

            var driving = new AMap.Driving({
                map: map,
                //驾车策略，
                policy: AMap.DrivingPolicy.LEAST_TIME
            })
            // 设计始点终点
            var start = new AMap.LngLat(114.399282, 30.517028)
            var end = new AMap.LngLat(114.408448, 30.522259)
            // 通过eachOverlay获取途经点定位
            var opts = {
                waypoints: []
            }
            geojson.eachOverlay(function (item) {
                opts.waypoints.push(item.getPosition())
            })
            driving.search(start, end, opts, function (status, result) {
                if (status == 'complete') {
                    console.log('规划路线完成', result);
                    // 获取路径点数组
                    var lineArr = []
                    result.routes[0].steps.forEach((item) => {
                        lineArr.push(...item.path)
                    })

                    // 实现模拟轨迹
                    var marker = new AMap.Marker({
                        map,
                        position: start, //定位
                        icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png', //icon标注
                        offset: new AMap.Pixel(-25, -13), //偏移量
                        autoRotation: true, //自动转换角度，
                        angle: -160, //开始的车头方向

                    })

                    // 绘制线的设置
                    var passedPolyline = new AMap.Polyline({
                        map: map,
                        strokeColor: "#AF5", //线的颜色
                        strokrWeight: 6, //线宽
                    })
                    marker.on('moving', function (e) {
                        passedPolyline.setPath(e.passedPath)
                    })
                    map.setFitView();
                    marker.moveAlong(lineArr, {
                        duration: 500,
                        autoRotation: true
                    })

                } else {
                    console.log('错误');
                }
            })
        })
    }
</script>

</html>

css:

html,
body,
#container {
    width: 100%;
    height: 100%;
}

实现效果

前端小程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫