高德地图web开发（vue项目）

在开发大屏中需要使用到高德地图，其中使用到的插件：

['AMap.InfoWindow', 'AMap.Marker', 'AMap.Polyline', 'AMap.Icon']

点标记，绘制路线，信息窗体，icon

 

开发思路：

在开发中，因为多个途径点不确定数量，所以就放在一个数组中方便管理

起始点和路线配置不变，只是数据改变之后路线会改变，就生成地图的时候配置后只改动经纬度

车子根据客户需求一直改动大小，最后用了  AMap.Icon 可以设置大小

监听传入参数，判断是否有地图对象调用  this.setData()  和  this.init() 

最后注销地图对象 

    beforeDestroy() {
        // this.map.remove(this.line); // 清除覆盖物/图层
        // 清除地图实例上的所有 click 事件绑定
        this.map.clearEvents('click');
        // 注销地图对象，并清空地图容器
        this.map.destroy()
    },

 

地图引入注册

import AMapLoader from '@amap/amap-jsapi-loader';

        init() {
            AMapLoader.load({
                key: "",             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.InfoWindow', 'AMap.Marker', 'AMap.Polyline', 'AMap.Icon'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.map = new AMap.Map("container", {  //设置地图容器id
                    viewMode: "2D",    //是否为3D地图模式
                    zoom: 14,           //初始化地图级别
                    center: [121.373811, 31.26834], //初始化地图中心点位置
                })
                this.map.on('click', (e) => console.log(e));
                this.addMarker()  // 添加标记点
                this.onabort()  // 配置路线
                this.infoWindowOpt()  // 置弹窗
                this.setData(this.vehicleGis || [], this.planGis || [])  // 传入数据
            }).catch(() => {
                console.log("地图加载失败！");
            });
        },

 

根据后端返回的路径配置路线 Polyline（折线）

        onabort() {
            this.vehicleGisLine = new AMap.Polyline({
                map: this.map,
                // showDir: true,  //是否延路径显示白色方向箭头,默认false
                strokeOpacity: 1,     //线透明度
                strokeColor: "#00CC33",  //线颜色
                strokeWeight: 4,      //线宽
                lineJoin: 'round', // bevel 不起作用
            });
            this.planGisLine = new AMap.Polyline({
                map: this.map,
                strokeColor: '#95A4BA',
                strokeOpacity: 1,     //线透明度
                strokeWeight: 4,      //线宽
                strokeStyle: 'dashed',      //样式
            });
            // 缩放地图到合适的视野级别
            // this.map.setFitView();
            // this.map.remove(路线对象); // 清除路线
        },

 

配置起始点 Marker 和 多个标记点

        // 添加起始点和车子
        addMarker() {
            this.markerQ = new AMap.Marker({
                map: this.map,
                position: [121.373811, 31.26834],
                clickable: false,
                icon: require('@/assets/img/Q_icon.png'),
                anchor: 'bottom-center',
            })
            this.marker = new AMap.Marker({
                map: this.map,
                zIndex: 12,
                position: [121.373811, 31.26834],
                // topWhenClick: false,
                icon: new AMap.Icon({
                    image: require('@/assets/img/mhc.png'),
                    imageSize: [48, 24],
                    // imageSize: [36, 18],
                }),
                anchor: 'middle-left',
            });
            this.markerZ = new AMap.Marker({
                map: this.map,
                position: [121.373811, 31.26834],
                // clickable: false,
                icon: require('@/assets/img/z_icon.png'),
                anchor: 'bottom-center',
            });
            this.marker.on('click', ({ lnglat }) => {
                this.infoWindow.open(this.map, [lnglat.lng, lnglat.lat])
            })
        },
        // 添加多个途径点
        addMarkerCon() {
            this.data.waypoints.forEach((m, i) => {
                if (i !== this.data.waypoints.length - 1) {
                    const { clientLongitude, clientLatitude, clientName, clientAddr } = m
                    var marker = new AMap.Marker({
                        map: this.map,
                        position: [clientLongitude, clientLatitude],
                        icon: require('@/assets/img/c_icon.png'),
                        // anchor: 'middle-left',
                        offset: new AMap.Pixel(-13, -30),
                    });
                    marker.on('click', ({ lnglat }) => this.markerClick(lnglat, clientName, clientAddr));
                    // marker.emit('click', { target: marker });//默认初始化不出现信息窗体,打开初始化就出现信息窗体
                    this.markers.push(marker);
                }
            });
        },
        // 途径点和终点的信息窗体
        markerClick({ lng, lat }, name, ads) {
            const con = `<div><div style="font-size: 14px;font-weight: bold;color: #333;">${name || ""}</div><span style="font-size: 12px;color: #999;">${ads || ''}</span></div>`
            this.infoWindowZ.setContent(con);
            this.infoWindowZ.open(this.map, [lng, lat]);
            // this.infoWindowZ.open(this.map, [lnglat.lng, lnglat.lat]);
        },

 

配置窗体信息  InfoWindow

        infoWindowOpt() {
            const content = ``
            this.infoWindow = new AMap.InfoWindow({
                isCustom: true,  //使用自定义窗体
                closeWhenClickMap: true,//控制是否在鼠标点击地图后关闭信息窗体
                anchor: 'middle-left',
                content,
                offset: new AMap.Pixel(42, -25),
            });
            this.infoWindowZ = new AMap.InfoWindow({
                closeWhenClickMap: true,
                content: '',
                offset: new AMap.Pixel(0, -16),
            });
            // this.infoWindow.close();  // 关闭窗体
        },

 

传入经纬度计算车子需要旋转的角度

        /**
            * 参数：
            *  fromPoint: [经度，纬度]   ------ 起点
            *  toPoint ：[经度，纬度]     ------ 终点
            *
            *  返回值：
            *  0-360的角度值
            **/
        getAngle(fromPoint, toPoint) {
            // 获取两点弧度
            var radian = Math.atan2(toPoint[1] - fromPoint[1], toPoint[0] - fromPoint[0]);
            // 转成角度
            var angle = radian * 180 / Math.PI;
            // 确保角度在0—360之间
            //将负值转化为正值
            if (angle < 0) angle += 360;
            //将0-180的y为负的转化为180-360之间
            if (toPoint[1] < fromPoint[1]) angle += 180;
            //调整角度为arcgis的角度，即setAngle(角度)
            if (angle >= 0 && angle <= 180) angle = 180 - angle;
            else if (angle > 180 && angle <= 360) angle = 540 - angle;
            else if (angle > 360) angle = angle % 360;
            return Number(angle);
        },

 

数据变动

        setData(arr1, arr2) {
            // 先把要改动的标记点清除干净，窗口关闭
            this.infoWindow.close();
            this.infoWindowZ.close();
            if (this.markers.length) {
                this.map.remove(this.markers);
                this.markers = []
            }
            this.vehicleGisLine.setPath(arr1)
            this.markerQ.setPosition(arr1[0])
            if (arr2.length) {  // 有规划路线
                this.planGisLine.setPath(arr2)
                this.markerZ.setPosition(arr2[arr2.length - 1])
                this.marker.setPosition(arr2[0])
                this.marker.setAngle(this.getAngle(arr2[0], arr2[1])) // 计算车子旋转角度
            } else { // 没有规划路线，终点就是车子的位置。
                this.markerZ.setPosition(arr1[arr1.length - 1])
                this.marker.setPosition(arr1[arr1.length - 1])
                this.marker.setAngle(this.getAngle(arr1[arr1.length - 2], arr1[arr1.length - 1]))
            }
            this.map.setCenter(arr1[arr1.length - 1], true)
            this.map.setFitView();
            const { clientName, clientAddr } = this.destination || {}
            this.markerZ.on('click', ({ lnglat }) => this.markerClick(lnglat, clientName, clientAddr))
            if (this.waypoints?.length > 1) {
                this.addMarkerCon()
            }
        },

 查看坐标是否在当前路线上 GeometryUtil.isPointOnLine

在 init 里面 this.GeometryUtil = AMap.GeometryUtil

遍历数组计算路线重合率。使用

                let list = []
                this.data.forEach(m => {
                    const isF = this.GeometryUtil.isPointOnLine([坐标], 路线, 误差范围);
                    list.push(isF)
                })
                const arrT = list.filter(m => m)
                console.log(Math.round(arrT.length / list.length * 100))