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