vue调用GoogleMap绘制车辆行驶路线以及坐标点标记

配置

1.使用google map api v3版本，v3取消了marker的label方法，所以要自己定义叠加层来使用带文字标签的标注，但是自定义非常繁琐，故引用现成的markerwidthlabel.js即可实现对标注添加label。

查看

引入api步骤

项目配置

在index.html中引入script

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=你的key"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./markerwithlabel.js"></script>

绘制路线

tripMap(indexeventId?: number) {
        var latlng = new google.maps.LatLng(this.mapCenterLat, this.mapCenterLng);
        var myOptions = {
            zoom: 15, // 缩放级别
            center: latlng, // 坐标
            mapTypeId: google.maps.MapTypeId.ROADMAP // 类型:默认的普通二维图块
        };
        const directionsRenderer = new google.maps.DirectionsRenderer();
        var map = new google.maps.Map(document.getElementById('map'), myOptions);
        var routes = new google.maps.DirectionsService();
        directionsRenderer.setMap(map);
        // 线条设置
        var polyOptions = {
            strokeColor: '#3388FF', // 颜色
            strokeOpacity: 0.8, // 透明度
            strokeWeight: 5 // 宽度
        };
        var poly = new google.maps.Polyline(polyOptions);
        poly.setMap(map); // 装载
        /* 循环标出所有坐标 */
        let infowindow = new google.maps.InfoWindow({
            content: ''
        });
        let symbolicon: any = {
            path:
                'M 5.51856 0.910213 L 0.714103 16.1773 C 0.664367 16.3354 0.752169 16.5038 0.910214 16.5536 C 0.939352 16.5627 0.96972 16.5674 1.00027 16.5674 L 10.5672 16.5674 C 10.7329 16.5674 10.8672 16.4331 10.8672 16.2674 C 10.8672 16.2371 10.8626 16.207 10.8536 16.1781 L 6.09112 0.91093 C 6.04178 0.752761 5.87356 0.664538 5.71539 0.713878 C 5.62159 0.743139 5.54806 0.816483 5.51856 0.910213 Z',
            fillOpacity: 1,
            strokeColor: '#4A90E2',
            fillColor: '#FFCB41',
            fillRule: 'evenodd',
            strokeWeight: 1.4,
            scale: 1,
            rotation: 0,
            anchor: new google.maps.Point(6.3, 0)
        };
        var bounds = new google.maps.LatLngBounds(); // 声明一个bounds
        for (var i = 0; i < this.locations.length; i++) {
            var loc = this.locations[i].coordiate.split(',');
            var path = poly.getPath(); // 获取线条的坐标
            path.push(new google.maps.LatLng(loc[0], loc[1])); // 为线条添加标记坐标
            bounds.extend(new google.maps.LatLng(loc[0], loc[1]));
            // 生成标记图标
            symbolicon.rotation = Number(this.locations[i].heading);
            const marker = new google.maps.Marker({
                position: new google.maps.LatLng(loc[0], loc[1]),
                map: map,
                icon: this.locations[i].eventId ? this.eventicon : symbolicon
                // 测试用
                // icon: symbolicon
            });
            let item = this.locations[i];
            let eventId = item.eventId;
            let duration = 0;
            if (eventId) {
                console.log({ tripEventData: this.tripEventData });
                this.tripEventData.forEach((items: any) => {
                    if (items.id === eventId) {
                        duration = items.duration / 1000;
                    }
                });
                console.log('open');

                marker.addListener('click', () => {
                    infowindow.setContent(
                        `<div class='infowindows'>` +
                            `<div class='leftBar'>` +
                            `</div>` +
                            `<div class='content'>` +
                            `<div class='type'>${item.eventType}</div>` +
                            `<div class='time'>${this.defaultTimeValue(item.time)}</div>` +
                            `<div class='duration'>Video length：${duration}s</div>` +
                            '</div>' +
                            `<div οnclick=handlePlayVideo(${eventId})> ` +
                            `<img  src='https://data.waylens.com/a50ea735abd819a6d229b55431be7da0.svg' alt=''>` +
                            `</div>` +
                            `</div>`
                    );
                    infowindow.open({
                        anchor: marker,
                        map,
                        shouldFocus: true
                    });
                });
            }
            if (indexeventId === eventId) {
                this.tripEventData.forEach((items: any) => {
                    if (items.id === indexeventId) {
                        duration = items.duration / 1000;
                    }
                });
                console.log('indexeventId === eventId');
                infowindow.setContent(
                    `<div class='infowindows'>` +
                        `<div class='leftBar'>` +
                        `</div>` +
                        `<div class='content'>` +
                        `<div class='type'>${item.eventType}</div>` +
                        `<div class='time'>${this.defaultTimeValue(item.time)}</div>` +
                        `<div class='duration'>Video length：${duration}s</div>` +
                        '</div>' +
                        `<div οnclick=handlePlayVideo(${eventId})> ` +
                        `<img  src='https://data.waylens.com/a50ea735abd819a6d229b55431be7da0.svg' alt=''>` +
                        `</div>` +
                        `</div>`
                );
                infowindow.open({
                    anchor: marker,
                    map,
                    shouldFocus: false
                });
            }
        }
        if (this.locations.length > 1) {
            // 如果坐标点多余1个，则使用  google map 的fitBounds，自动计算zoom值
            map.fitBounds(bounds);
        }
    }

单个坐标点

initMap(item: any, index: number) {
        this.isActive = index;
        let map: any;
        let latlng = { lat: item.gpsLatitude, lng: item.gpsLongitude };
        let myOptions = {
            zoom: this.centerZoom, // 缩放级别
            center: latlng, // 坐标
            mapTypeId: google.maps.MapTypeId.ROADMAP // 类型:默认的普通二维图块
        };
        let infowindow = new google.maps.InfoWindow({
            content: ''
        });
        map = new google.maps.Map(document.getElementById('map'), myOptions);
        const beachMarker = new google.maps.Marker({
            position: latlng,
            map,
            icon: this.eventicon
        });
        infowindow.setContent(
            `<div class='infowindows'>` +
                `<div class='leftBar'>` +
                `</div>` +
                `<div class='content'>` +
                `<div class='type'>${item.eventType}</div>` +
                `<div class='time'>${this.defaultTimeValue(item.gpsTime)}</div>` +
                `<div class='duration'>Video length：${item.duration / 1000}s</div>` +
                '</div>' +
                `<div οnclick=handlePlayVideo(${item.id})> ` +
                `<img  src='https://data.waylens.com/a50ea735abd819a6d229b55431be7da0.svg' alt=''>` +
                `</div>` +
                `</div>`
        );
        infowindow.open({
            anchor: beachMarker,
            map,
            shouldFocus: false
        });
    }

多个坐标点

initMaps() {
        let map: any;
        let lat = this.mapCenterLat;
        let lng = this.mapCenterLng;
        let latlng = { lat, lng };
        console.log({ latlng });
        let myOptions = {
            zoom: this.centerZoom, // 缩放级别
            center: latlng, // 坐标
            mapTypeId: google.maps.MapTypeId.ROADMAP // 类型:默认的普通二维图块
        };
        map = new google.maps.Map(document.getElementById('map'), myOptions);
        var bounds = new google.maps.LatLngBounds(); // 声明一个bounds
        // 提取每一个item的gpsData，都为空说明本页数据没有坐标返回，需要修正地图定位
        let gpsDataArray: any = [];
        this.dataList.forEach((item: any) => {
            if (item.gpsData) {
                gpsDataArray.push(item.gpsData);
                const infowindow = new google.maps.InfoWindow({
                    content: `<div id="content">${item.plateNo}-${item.driverName}` + `<div id="siteNotice">` + `<img style='width:400px;height:300px' src=${this.wrapperImage(item.lastPicture)} alt=''>` + '</div>' + '</div>'
                });
                let symbol: string = '';
                if (item.isOnline && item.mode === 'parking') {
                    symbol = this.greencar;
                } else if (item.isOnline && item.mode === 'driving') {
                    symbol = this.bulecar;
                } else if (!item.isOnline) {
                    symbol = this.officon;
                }
                this.cariconSymbol = symbol;
                let positions;
                if (item.gpsData.coordinate) {
                    positions = { lat: Number(item.gpsData.coordinate[1]), lng: Number(item.gpsData.coordinate[0]) };
                    bounds.extend(new google.maps.LatLng(Number(item.gpsData.coordinate[1]), Number(item.gpsData.coordinate[0])));
                } else {
                    positions = { lat: this.mapCenterLat, lng: this.mapCenterLng };
                    console.log({ positions });
                }
                // console.log({ positions });
                const beachMarker = new google.maps.Marker({
                    position: positions,
                    map,
                    icon: this.cariconSymbol
                });
                beachMarker.addListener('click', (item: any) => {
                    // this.cardetailDio = true;
                    this.handleTripDetail(item.cameraSn);
                });
                beachMarker.addListener('mouseover', () => {
                    infowindow.open({
                        anchor: beachMarker,
                        map,
                        shouldFocus: false
                    });
                });
                beachMarker.addListener('mouseout', () => {
                    infowindow.close();
                });
            }
        });
        console.log({ gpsDataArray });
        if (this.dataList.length > 1 && gpsDataArray.length > 1) {
            // 如果坐标点多余1个，则使用  google map 的fitBounds，自动计算zoom值
            map.fitBounds(bounds);
        }
    }

单个坐标点

initMap(item: any, index: number) {
        this.isActive = index;
        let map: any;
        let latlng = { lat: item.gpsLatitude, lng: item.gpsLongitude };
        let myOptions = {
            zoom: this.centerZoom, // 缩放级别
            center: latlng, // 坐标
            mapTypeId: google.maps.MapTypeId.ROADMAP // 类型:默认的普通二维图块
        };
        let infowindow = new google.maps.InfoWindow({
            content: ''
        });
        map = new google.maps.Map(document.getElementById('map'), myOptions);
        const beachMarker = new google.maps.Marker({
            position: latlng,
            map,
            icon: this.eventicon
        });
        infowindow.setContent(
            `<div class='infowindows'>` +
                `<div class='leftBar'>` +
                `</div>` +
                `<div class='content'>` +
                `<div class='type'>${item.eventType}</div>` +
                `<div class='time'>${this.defaultTimeValue(item.gpsTime)}</div>` +
                `<div class='duration'>Video length：${item.duration / 1000}s</div>` +
                '</div>' +
                `<div οnclick=handlePlayVideo(${item.id})> ` +
                `<img  src='https://data.waylens.com/a50ea735abd819a6d229b55431be7da0.svg' alt=''>` +
                `</div>` +
                `</div>`
        );
        infowindow.open({
            anchor: beachMarker,
            map,
            shouldFocus: false
        });
    }

效果图

细节分析（缩放和中心点尚需完善）

1.地图的中心点
	根据返回的经纬度均值取
	let max1 = Math.max(...coordinate1);
    let min1 = Math.min(...coordinate1);
    let max2 = Math.max(...coordinate2);
    let min2 = Math.min(...coordinate2);
    this.mapCenterLat = (max2 + min2) / 2;
    this.mapCenterLng = (max1 + min1) / 2;
2.地图的缩放系数（保证所有的坐标点都在图中展示开）
在循环坐标之前：
var bounds = new google.maps.LatLngBounds(); // 声明一个bounds
循环坐标之后
if (this.locations.length > 1) {
 // 如果坐标点多余1个，则使用  google map 的fitBounds，自动计算zoom值
    map.fitBounds(bounds);
 }
 3.修正icon的精准度