Google Maps谷歌地图车辆位置描点、位置详情查看

根据经纬度、方位角渲染位置点图标(黄色图标为车辆在线、灰色图标为车辆离线) ;点击车辆具体图标可查看速度、海拔、平均油耗、定位时间以及定位地点(调用阿里云逆地理编码接口,将经纬度转换为详细结构化的地址)

 

map = new google.maps.Map(document.getElementById('map'), {
        // zoom 属性指定了地图的 缩放级数
        zoom: 4,
        // 起始位置
        center: new google.maps.LatLng(34.31229993, 108.76148126),
        // 免摁Ctrl键缩放
        gestureHandling: 'greedy',
        // 地图的初始化类型
        mapTypeId: google.maps.MapTypeId.HYBRID,
        // 比例尺
        scaleControl: true
    });

$.each(JSON.parse(results.msg), function (index, row) {
            // 车辆icon
            var iconk = "info" + index;
            // 判断车辆状态(0在线 1离线)
            if (row.status == 0) {
                // 记录在线车辆总数
                onlineVehicle += 1;
                // 在线车辆
                iconlist[iconk] = {name: iconk, icon: iconBaseOnline + row.angle + ".png"};
            } else {
                // 离线车辆
                iconlist[iconk] = {name: iconk, icon: iconBaseOffline + row.angle + ".png"};
            }
            // 车辆位置坐标点、图标、海拔、车架号
            printList.push({lat: row.y, lng: row.x, type: $.trim(iconk), elevation: row.hb, tboxVin: row.uid});
        });

        // 渲染位置点、图标
        var markers = printList.map(function (location, i) {
            var clickMarker = new google.maps.Marker({
                position: location,
                icon: iconlist[location.type].icon
            });

            clickMarker.addListener('click', function () {
                infowindow.open(map, clickMarker);
            });

            return clickMarker;
        });

        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: '../img/m'});
    });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值