Para integrar o AMap em projetos Vue, utilizamos os seguintes plugins:

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

Esses componentes permitem criar marcadores, rotas, janelas informativas e ícones personalizados.

Estratégia de implementação:

Pontos intermediários são armazenados num array dinâmico para flexibilidade. Rotas e pontos fixos são reconfigurados apenas quando os dados mudam. Ícones de veículos são dimensionados via AMap.Icon.

Destruição do mapa no ciclo de vida:

    beforeDestroy() {
        this.map.clearEvents('click');
        this.map.destroy()
    },

Inicialização do mapa:

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

        inicializarMapa() {
            AMapLoader.load({
                key: "",
                version: "2.0",
                plugins: ['AMap.InfoWindow', 'AMap.Marker', 'AMap.Polyline', 'AMap.Icon'],
            }).then((AMap) => {
                this.mapa = new AMap.Map("mapaContainer", {
                    viewMode: "2D",
                    zoom: 14,
                    center: [121.373811, 31.26834],
                })
                this.configurarEventos();
                this.adicionarMarcadores();
                this.configurarRotas();
                this.criarJanelas();
                this.atualizarDados(this.dadosVeiculo, this.dadosPlanejamento);
            }).catch(() => {
                console.error("Falha no carregamento do mapa");
            });
        },

Configuração de rotas com Polyline:

        configurarRotas() {
            this.rotaVeiculo = new AMap.Polyline({
                mapa: this.mapa,
                opacidade: 1,
                cor: "#00CC33",
                espessura: 4,
                juncao: 'round',
            });
            this.rotaPlanejada = new AMap.Polyline({
                mapa: this.mapa,
                cor: '#95A4BA',
                opacidade: 1,
                espessura: 4,
                estilo: 'tracejado',
            });
        },

Gerenciamento de marcadores:

        adicionarMarcadores() {
            this.marcadorInicial = new AMap.Marker({
                mapa: this.mapa,
                posicao: [121.373811, 31.26834],
                icone: require('@/assets/img/icone_inicio.png'),
                ancora: 'centro-base',
            })
            this.marcadorVeiculo = new AMap.Marker({
                mapa: this.mapa,
                zIndex: 12,
                posicao: [121.373811, 31.26834],
                icone: new AMap.Icon({
                    imagem: require('@/assets/img/icone_veiculo.png'),
                    tamanho: [48, 24],
                }),
                ancora: 'esquerda-meio',
            });
            this.marcadorFinal = new AMap.Marker({
                mapa: this.mapa,
                posicao: [121.373811, 31.26834],
                icone: require('@/assets/img/icone_fim.png'),
                ancora: 'centro-base',
            });
        },
        
        adicionarPontosIntermediarios() {
            this.dados.pontosIntermediarios.forEach((ponto, indice) => {
                const { longitude, latitude, nome, endereco } = ponto
                let marcador = new AMap.Marker({
                    mapa: this.mapa,
                    posicao: [longitude, latitude],
                    icone: require('@/assets/img/icone_intermediario.png'),
                    deslocamento: new AMap.Pixel(-13, -30),
                });
                marcador.on('click', () => this.exibirInfoJanela(ponto));
            });
        },

Configuração de janelas informativas:

        criarJanelas() {
            this.janelaVeiculo = new AMap.InfoWindow({
                personalizada: true,
                fecharAoClique: true,
                conteudo: '',
                deslocamento: new AMap.Pixel(42, -25),
            });
            this.janelaPadrao = new AMap.InfoWindow({
                fecharAoClique: true,
                conteudo: '',
                deslocamento: new AMap.Pixel(0, -16),
            });
        },

Cálculo de ângulo de rotação:

        calcularAngulo(pontoOrigem, pontoDestino) {
            let radianos = Math.atan2(
                pontoDestino[1] - pontoOrigem[1], 
                pontoDestino[0] - pontoOrigem[0]
            );
            let angulo = radianos * 180 / Math.PI;
            if (angulo < 0) angulo += 360;
            if (pontoDestino[1] < pontoOrigem[1]) angulo += 180;
            return Number(angulo);
        },

Atualização dinâmica de dados:

        atualizarDados(dadosVeiculo, dadosRota) {
            this.janelaVeiculo.fechar();
            this.janelaPadrao.fechar();
            
            this.rotaVeiculo.setPath(dadosVeiculo);
            this.marcadorInicial.setPosition(dadosVeiculo[0]);
            
            if (dadosRota.length) {
                this.rotaPlanejada.setPath(dadosRota);
                this.marcadorFinal.setPosition(dadosRota[dadosRota.length - 1]);
                this.marcadorVeiculo.setPosition(dadosRota[0]);
                this.marcadorVeiculo.setAngulo(
                    this.calcularAngulo(dadosRota[0], dadosRota[1])
                );
            } else {
                this.marcadorFinal.setPosition(dadosVeiculo[dadosVeiculo.length - 1]);
                this.marcadorVeiculo.setPosition(dadosVeiculo[dadosVeiculo.length - 1]);
                this.marcadorVeiculo.setAngulo(
                    this.calcularAngulo(
                        dadosVeiculo[dadosVeiculo.length - 2], 
                        dadosVeiculo[dadosVeiculo.length - 1]
                    )
                );
            }
            this.mapa.setCenter(dadosVeiculo[dadosVeiculo.length - 1], true);
            this.mapa.ajustarVisualizacao();
        }

Verificação de coordenadas em rotas:

        verificarCoordenadasNaRota(coordenadas, rota, tolerancia) {
            return AMap.GeometryUtil.isPointOnLine(coordenadas, rota, tolerancia);
        }