高德地图的使用

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/gwc.css">
    <title>实时监控</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
        .dialog-bot{
            width:calc(100% - 1.5rem)
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    var bodyPos,
        markers = [],   //标注对象
        cph = [],   // 车牌号
        data = [];  // 车辆数据
       
    apiready = function(){
        bodyPos = $api.offset($api.dom('body'));
        $api.setStorage('dialog', 'false');
        cars = $api.getStorage('cars');

    }
    // 创建地图
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:12, //初始化地图层级
        center: [121.480381, 31.236351] //初始化地图中心点
    });
    // 数据推送
    chat.client.recieveGpsData = function (gps) {
        // console.log(gps)
        var gps = JSON.parse(gps)
       
        var marker = gps.VehicleNo;
        // 判断是否在加载车辆
        if(cph.indexOf(gps.VehicleNo) == '-1'){
          
                // 存入新加载车辆  车牌号
                cph.push(gps.VehicleNo)
                // 添加标注  
                marker = new AMap.Marker({
                    icon: "../../image/mapcar.png",
                    // size:[20,20],
                    position: [gps.Longitude, gps.Latitude],
                    angle:gps.Direction,
                    autoRotation:true,
                    clickable:true,
                    id:gps.VehicleNo
                }).on('click',function(e){
                    var x = (bodyPos.w - 300) / 2;
                    // 获取点击的车辆 车牌号
                    carCheck = data[e.target['B'].id]
                    // 设置点击车辆的数据   详情页的数据来源
                    $api.setStorage('data', data[e.target['B'].id]);
                    // 显示底部信息
                    $('.aui-list-item-title').html('已选择<span class="vehicleno">'+ e.target['B'].id+'</span>')
                    // 判断详情是否存在
                    if($api.getStorage('dialog') != 'false'){
                        // 执行数据的加载
                        api.execScript({
                            frameName: 'dialog',
                            script: 'loadData();'
                        });
                    }
                })
              
			
                marker.setMap(map);
                // 以车牌号 存车辆信息
                data[gps.VehicleNo] = gps;
                // 以车牌号  存标注对象
                markers[gps.VehicleNo] = marker;
            
        }else{
            // 设置标注的位置
            markers[gps.VehicleNo].setPosition([gps.Longitude, gps.Latitude]);
            // var lnglat = new AMap.LngLat(gps.Longitude, gps.Latitude);
            // markers[gps.VehicleNo].moveTo(lnglat, gps.GPSSpeed, function (k) { console.log(new Date().toLocaleString()); return k });
            // 设置标注角度
            markers[gps.VehicleNo].setAngle(gps.Direction)
            // 以车牌号 存车辆信息
            data[gps.VehicleNo] = gps;
        }

    }
   
</script>


</body>
</html>
猜你喜欢
