vue使用高德地图实现多车定位和信息窗口:

1.思路:

【1】先获取key=>官网：https://lbs.amap.com/?ref=https://console.amap.com
【2】下载并导入依赖=》npm install vue-amap -S
【3】使用

2、官网=》右上角控制台

3、使用过程：

【1】安装依赖：

npm install vue-amap --save-dev

【2】main.js中注册:

import AMap from 'vue-amap'
Vue.use(AMap)
AMap.initAMapApiLoader({
  key: '你申请的key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
})

【3】页面中使用：

<template>
   <div class="sectionRightBottomBoxB">
        <h3>公司车辆定位</h3>
        <div class="ebox">
            <div id="container" style="width:100%;height:100%"></div>
        </div>
   </div>
</template>

<script>
import {  searchByCarNum } from '@/api/home/index.js'

export default {
    name: 'Home',
    data() {
        return {
            // 地图
            firstArr: [116.478935, 39.997761], //中心点/初始坐标=>联调时，用后台数据将此数据覆盖
            map: null,
            marker: null,
            carPosition: [],//车辆信息
            infoWindow: null,//信息窗口
        }
    },
    created() {
        this.getSearchByCarNum()
    },
    mounted() {
        setTimeout(() => {
            this.initMap() // 初始化地图
        }, 1000)
    },
    methods: {
        // 车辆定位
        getSearchByCarNum() {
            const that = this
            let param = {
                pageNum: '1',//stringtrue当前页数
                pageSize: '10',//stringtrue每页数
            }
            searchByCarNum({ param }).then(res => {
                if (res.data.code == 0) {
                    if (res.data.data.list.length <= 0) {
                        that.$message.warning('该站点没有车辆信息')
                        that.carPosition = []
                        that.initMap()
                        return
                    }
                    that.carPosition = res.data.data.list
                    that.firstArr = [that.carPosition[0].longitude, that.carPosition[0].latitude]
                    that.initMap()
                }
            })
        },
        // 初始化地图
        initMap() {
            const that = this
            this.map = new AMap.Map('container', {
                resizeEnable: true, // 窗口大小调整
                center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],
                zoom: 10
            })
            this.carPosition.forEach(item => {
                if (item.longitude == 0 || !item.longitude) {
                    return
                }
                this.marker = new AMap.Marker({
                    map: this.map,
                    position: [item.longitude, item.latitude],
                    icon: require('../../assets/img/02.png')
                })

                that.marker.on('click', function () {
                    //构建信息窗体中显示的内容
                    var info = [];
                    info.push("车牌号:" + item.carNumber);
                    info.push("状态:" + item.status);
                    info.push("地址:" + item.location);
                    that.infoWindow = new AMap.InfoWindow({
                        content: info.join("
"), //使用默认信息窗体框样式，显示信息内容
                    });
                    //鼠标点击marker弹出自定义的信息窗体
                    that.infoWindow.open(that.map, that.firstArr);
                });
            })
        },
    },
    beforeDestroy() {
        this.map && this.map.destroy();
    }
}
</script>

4.最终效果: