高德地图简单api使用例子

theOtherSky
已于 2023-11-23 14:17:35 修改
阅读量667
点赞数
分类专栏：前端例子文章标签：前端
于 2023-11-23 11:48:19 首次发布
本文链接：https://blog.csdn.net/qq_35181466/article/details/134573809
版权
前端例子专栏收录该内容
21 篇文章
订阅专栏
实现功能：
1地图加载，
2显示地图控件，
3实现点击操作，
4数据持久化实现（geojson），
5实现覆盖层点击事件，
6记录覆盖物点击次数（extData），
7显示信息提示框显示（InfoWindow），
8推荐路线（AMap.Driving）
9推荐路线有途径点（opts）
10实现轨迹模拟路线(示例地址：https://lbs.amap.com/demo/javascript-api-v2/example/marker/replaying-historical-running-data)
<!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>webGisDemo</title>
    <style>
        #container{
            width: 100vw;
            height: 100vh;
        }
        #btn{
            padding: 10px 20px;
            border: 1px solid #333;
            border-radius: 6px;
            position: absolute;
            bottom: 20px;
            right: 20px;
            background-color: #fff;
        }
    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            serviceHost:'您的代理服务器域名或地址/_AMapService',  
            // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
</head>
<body>
    <!-- 高德地图api地址 -->
    <!-- https://lbs.amap.com/api/javascript-api/guide/abc/plugins -->
    <!-- 实现功能：
        1地图加载，
        2显示地图控件，
        3实现点击操作，
        4数据持久化实现（geojson），
        5实现覆盖层点击事件，
        6记录覆盖物点击次数（extData），
        7显示信息提示框显示（InfoWindow），
        8推荐路线（AMap.Driving）
        9推荐路线有途径点（opts）
        10实现轨迹模拟路线(示例地址：https://lbs.amap.com/demo/javascript-api-v2/example/marker/replaying-historical-running-data)
     -->
    <div id="container"></div>
    <div id="btn" onclick="btnStart()">开始动画</div>
    <script type="text/javascript">
        // 定义一个变量，保存一个对象
        let map = new AMap.Map('container', {
            zoom:11,//级别
            center: [116.397428, 39.90923],//中心点坐标
            viewMode:'3D',//使用3D视图
            pitch:45
        });
        //实时路况图层
        var trafficLayer = new AMap.TileLayer.Traffic({
            zIndex: 10
        });
        map.add(trafficLayer);//添加图层到地图
        // var marker = new AMap.Marker({
        //     position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        //     title: '北京'
        // });

        // // 将创建的点标记添加到已有的地图实例：
        // map.add(marker);
        //异步同时加载多个插件
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.MoveAnimation'],function(){
            map.addControl(new AMap.ToolBar()); //缩放工具条
            map.addControl(new AMap.Scale());   //Scale
            map.addControl(new AMap.ControlBar());  //方向控制杆
            // map.addControl(new AMap.MoveAnimation());  //动画插件
        });
        // 定义一个全局变量，保存geojson
        var geojson = new AMap.GeoJSON({
            geoJSON:null
        })
        // 导入数据
        if(JSON.stringify(getData()) != '[]' ){
            geojson.importData(getData());
            // 恢复旧数据的点击事件
            geojson.eachOverlay(function(item){
                item.on('click',function(e){
                    console.log(e.lnglat,'旧的覆盖物数据点击')
                    // 记录点击次数
                    let ext = item.getExtData()
                    let click = ++ext._geoJsonProperties.click
                    console.log('同一个旧的覆盖物点击了'+click+'次')
                    // 显示信息提示框显示
                    let infowindow = new AMap.InfoWindow({
                        anchor: 'top-center',
                        content: `<div>打卡了${click}次</div>`
                    })
                    // 显示（打开信息窗口）
                    infowindow.open(map, marker.getPosition())
                    saveData(geojson.toGeoJSON())
                })
            })
        }
        map.add(geojson)

        // 监听地图的点击事件
        map.on('click',function(e){
            let marker = new AMap.Marker({
                position:e.lnglat,
                extData:{
                    _geoJsonProperties: {
                        gid:geojson.getOverlays().length + 1,
                        click: 0
                    }
                }
            })
            // 使用覆盖物的点击事件
            marker.on('click',function(e){
                console.log(e.lnglat,'点击了新的覆盖物')
                // 记录点击次数
                let ext = marker.getExtData()
                let click = ++ext._geoJsonProperties.click
                console.log('同一个覆盖物点击了'+click+'次')
                // 显示信息提示框显示
                let infowindow = new AMap.InfoWindow({
                    anchor: 'top-center',
                    content: `<div>打卡了${click}次</div>`
                })
                // 显示（打开信息窗口）
                infowindow.open(map, marker.getPosition())
            })
            // map.add(marker)
            // 通过geojson对象来管理覆盖物，显示点
            geojson.addOverlay(marker)
            // 保存数据（将geojson对象转换成标准的GeoJSON格式对象）
            saveData(geojson.toGeoJSON())

        })


        // 从loaclStorage读取数据
        function getData(){
            // 如果本地loaclStorage中不存在数据
            if(!localStorage.getItem('geojson')) {
                localStorage.setItem('geojson','[]')
            }
            return JSON.parse(localStorage.getItem('geojson'))
        }
        // 将数据保存到localStorage中
        function saveData(data) {
            localStorage.setItem('geojson', JSON.stringify(data))
        }
        // 推荐路线开始动画
        function btnStart(){
            console.log('开始动画')
            // 实现路径规划（导航）
            AMap.plugin('AMap.Driving', function() {
                let driving = new AMap.Driving({
                    map: map,
                    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                    policy: AMap.DrivingPolicy.LEAST_TIME
                })
                // ------1直接通过地点名字经行路径规划------
                // let points = [
                //     { keyword: '王府井（地铁站）',city:'北京' },
                //     { keyword: '天安门西（地铁站）',city:'北京' }
                // ]

                // driving.search(points, function (status, result) {
                // // 未出错时，result即是对应的路线规划方案
                //     if (status === 'complete') {
                //         console.log('绘制驾车路线完成')
                //     } else {
                //         console.log('获取驾车数据失败：' + result)
                //     }
                // })
                // ------2通过经纬度进行路径规划(有多个途径点)------
                let startLngLat = [116.42532, 39.908587]
                let endLngLat = [116.506936, 39.982547]
                let opts = {
                    waypoints: []
                }
                geojson.eachOverlay(function(item) {
                    opts.waypoints.push(item.getPosition())
                })
                driving.search(startLngLat, endLngLat, opts, function (status, result) {
                    // 未出错时，result即是对应的路线规划方案
                    if (status === 'complete') {
                        let lineArr = []
                        result.routes[0].steps.forEach(function (item) {
                            lineArr.push(...item.path)
                        })
                        console.log('绘制驾车路线完成')
                        let markerTwo = new AMap.Marker({
                            map: map,
                            position:startLngLat,
                            icon: 'https://webapi.amap.com/images/car.png',
                            offset: new AMap.Pixel(-26, -13),
                            autoRotation: true,
                            angle: -180
                        })
                        let passedPolyline = new AMap.Polyline({
                            map: map,
                            strokeColor: '#AF6',    //线的颜色
                            strokeWeight: 6    //线的宽度
                        })
                            console.log('-----车辆途径路段-----',lineArr)
                        markerTwo.on('moving', function(e){
                            passedPolyline.setPath(e.passedPath)
                        })
                        map.setFitView()
                        markerTwo.moveAlong(lineArr, {
                            duration: 500,
                            autoRotation: true
                        })
                    } else {
                        console.log('获取驾车数据失败：' + result)
                    }
                }) 
            })
        }
    </script>
</body>
</html>