<!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>
高德地图的使用
猜你喜欢
转载自blog.csdn.net/qq_36061522/article/details/82802257
今日推荐
周排行