GPS定位与百度地图应用
js 百度地图
<!DOCTYPE html>
<html>
<head>
<title>GPS定位系统</title>
<meta name="Robots" content="noindex,nofollow,noarchive"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<link rel="shortcut icon" type="image/x-icon" href="__STATIC__/img/favicon.ico?version={:C('VERSION')}"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css?version={:C('VERSION')}"/>
<style>
.amap-copyright{display:none !important}
#calendarTable{line-height:16px !important}
.menu_icon{float:left;margin:7px 0 0 10px;font-family:Comic Sans MS;width:18px;height:3px;padding:3px 0;border-top:3px solid #DD575C;border-bottom:3px solid #DD575C;background-color:#DD575C;background-clip:content-box;cursor:pointer}
.desk_tab{width:100%;line-height:26px}
.desk_tab th, .desk_tab td{border:1px solid #CCCCCC}
.desk_tab th{background:#DFE8F6}
.desk_tab td.hover_t{border:1px dashed #CCCCCC;color:#999}
.desk_tab td.hover_t:hover{border:1px dashed #BBBBBB;color:#666}
#route_desk select, #route_desk input{vertical-align:middle;font-size:14px }
#route_desk button{vertical-align:middle;padding:5px 1%;border:none;border-radius:3px;background:#6699CC;font-size:14px;color:#EEEEEE}
/*配送员位置的Label名字*/
.amap-marker-label{min-width:50px;text-align:center;background:rgba(0,0,0,0.5);box-sizing:border-box;border:0;border-radius:3px;color:#FFF}
#map_set{position:absolute;right:0;bottom:0;z-index:99;padding:5px 10px;border:1px solid #666;border-radius:5px;background:#FFF}
#orbitbg{position:absolute;z-index:990;top:50%;bottom:0;width:100%;height:50%;background:rgba(0,0,0,0.7)}
</style>
</head>
<body class="hboxpage" data-first="0">
<div id="gps_desk" style="width:320px">
<p class="mt10 mb10 center" style="border-bottom:1px solid #ccc;">
<select style="margin-left:10px;font-size:12px;padding:2px;width:140px;height:35px;" id="onoffline" onchange="displayOnOff()">
</select>
<input type="text" id='nickName' value="" style="width:140px;height:30px;" placeholder="输入名称查询" oninput="queryNickName()">
<input type="hidden" id="offinput" value="0" >
</p>
<p class="center mt10 mb10" style="display: none">
<select style="margin-left:10px;font-size:14px;padding:3px" onchange="fresh()" id="selectFresh">
<option value="1">10秒刷新</option>
<option value="2">不刷新</option>
</select>
<button class="active_t" style="padding:2px 4%" onclick="window.location.reload();">刷新</button>
</p>
<p class="pointer hover_t" style="text-align:center" onclick="addUser()"><b class="mr10 font16" style="vertical-align:middle;">+</b>定位器</p>
<table class="center desk_tab">
<tr>
<th width="100">名称</th>
<!--<th width="50" class="pointer active_t" onclick="setKeloopBear();">持单↺</th>-->
<th width="50" class="pointer active_t">持单</th>
<th width="50" class="pointer active_t" onclick="deskSequence(this)" data-type="0">状态↑↓</th>
<th width="40">定位</th>
<th width="45">操作</th>
</tr>
<tbody id="detailTemplate">
</tbody>
<script type="text/html" id="detailTemplate_tmp">
{{each list as arr i }}
<tr id="offline" data-id="{{arr.id}}" data-state="{{if arr.state==1}}online{{else}}offline{{/if}}">
{{if arr.from==1}}
<td class="pointer fontb clo0" title="定位神器：{{arr.device_imei}}">{{arr.nick_name}}</td>
{{/if}}
{{if arr.from==2}}
<td class="pointer fontb blue" title="快跑者APP帐户：{{arr.id_card}}">{{arr.nick_name}}</td>
{{/if}}
{{if arr.from==1}}
<td>-</td>
{{/if}}
{{if arr.from==2}}
<!--<td id="bear_{{arr.id_card}}">-</td>-->
<td >{{arr.count}}</td>
{{/if}}
{{if arr.state==1}}
<td class="green" title="号卡：{{arr.id_card}}">在线</td>
{{/if}}
{{if arr.state==0}}
<td class="clo9" title="号卡：{{arr.id_card}}">离线</td>
{{/if}}
{{if arr.record}}
<td class="pointer" onclick="focusCenter(this)" id="sign_{{arr.id}}" data-longitude="{{arr.record.longitude}}" data-latitude="{{arr.record.latitude}}">
<img height="24" src="__STATIC__/img/sign_map.png"/>
</td>
{{else}}
<td><img height="24" src="__STATIC__/img/sign_map_no.png"/></td>
{{/if}}
{{if arr.from==1}}
<td class="cmlr3">
<a onclick="updateUser($(this))" style="cursor:pointer;" data-id="{{arr.id}}" data-name="{{arr.nick_name}}" data-card="{{arr.id_card}}" data-imei="{{arr.device_imei}}" data-charactor="{{arr.from}}">修改</a>
</td>
{{/if}}
{{if arr.from==2}}
<td class="cmlr3">-</td>
{{/if}}
</tr>
{{/each}}
</script>
</table>
</div>
<div class="flex vboxpage bgf">
<div class="flex" id="container" style="overflow:hidden"></div>
</div>
<div class="flex" id="vista" style="width:60%;display:none"></div>
<div id="map_set">
<p>
<button class="active_t font14" onclick="startRuler()">开始测距</button>
<button class="right active_t font14" onclick="closeVista()" id="closeVistaBtn" style="display:none">关闭街景</button>
</p>
</div>
<!--个人信息设置-->
<div id="set_box" style="display:none"></div>
<!--修改设备对话框-->
<div id="gps_userU" style="display:none">
<div class="fullbg" style="z-index:399" onclick="$(this).parent().hide();"></div>
<div class="pop center" style="z-index:400">
<div id="type_deviceU" style="display:block">
设备编号：<input type="text" id="device_imeiU" /><br/>
备注名称：<input type="text" id="nick_nameU" /><br/>
SIM号卡：<input type="text" id="id_cardU" /><br/><br/>
</div>
<button class="common_btn" onclick="update();">提交保存</button>
<button class="common_btn" style="margin-left:30px;background:#CCCCCC;" onclick="del();">删除设备</button>
</div>
</div>
<!--添加设备对话框-->
<div id="gps_user" style="display:none">
<div class="fullbg" style="z-index:399" onclick="$(this).parent().hide();"></div>
<div class="pop center" style="z-index:400">
<!--设备类型：-->
<!--<label><input type="radio" na me="from" value="1" checked>定位神器</label>-->
<!--<label><input type="radio" name="from" value="2">快跑者APP</label><br/>-->
<div id="type_device" style="display:block">
设别编号：<input type="text" id="device_imei" /><br/>
备注名称：<input type="text" id="nick_name" /><br/>
SIM号卡：<input type="text" id="id_card" /><br/><br/>
</div>
<button class="common_btn" onclick="add();">提交保存</button>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="__STATIC__/js/jquery.2.2.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/template.js?version={:C('VERSION')}"></script>
<script type="text/javascript" src="__STATIC__/js/calendar.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7isb5V1OeAamqDkMICsp3Yaz"></script>
<script>
var markers = [],
detailData,
detailDataOnline=[],
detailDataOffline=[],
id,
imei,
idCard,
nickName,
circledata,
polylines = [],
pathName = [],
pathData = [],
pathColor= [];
var searchUrl = "http://yingyan.baidu.com/api/v3/entity/search";
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
//设置所在城市
var myCity = new BMap.LocalCity();
myCity.get(function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
});
$(function(){
setKeloopLogin();
fresh();
setTimeout(function(){
$("body").data("first","1");
},500);
});
/*设置快跑者进入的登录*/
function setKeloopLogin(){
var token = '{$token}';
if(token != ''){
token_str = 'Bearer '+token;
var expdate = new Date(); //初始化时间
expdate.setTime(expdate.getTime() + 1*(60 * 60 * 24 * 7)*1000); //设置过期时间1天
document.cookie = "authorization"+"="+token_str+";expires="+expdate.toGMTString()+";path=/";
}
}
/*对在线离线配送员排序*/
function deskSequence(obj){
var type=$(obj).data("type");
$("#detailTemplate").find("tr").each(function (){
if(type==0 || type==2) {
if ($(this).data("state") == "offline") {
$("#detailTemplate").append($(this));
}
$(obj).data("type",1);
}else{
if ($(this).data("state") == "online") {
$("#detailTemplate").append($(this));
}
$(obj).data("type",2);
}
})
}
function fmtDate(obj){
var date = new Date(obj);
var y = 1900+date.getYear();
var m = "0"+(date.getMonth()+1);
var d = "0"+date.getDate();
return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
}
//判断下拉框设置刷新时间
function fresh(){
getdata();
if($("#selectFresh").val() == 1){
circledata = setInterval("getdata()", 10000);
}else{
clearInterval(circledata);
}
if($("body").data("first")){
clearpop("设置成功！");
}
}
function conver(){
var x = 116.32715863448607;
var y = 39.990912172420714;
var ggPoint = new BMap.Point(x,y);
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
var a;
convertor.translate(pointArr, 3, 5, function (data){
if(data.status === 0) {
a = data.points[0];
console.log(data);
}
});
return a;
}
var a = conver();
console.log(a);
function ajaxDataProcess(data){
console.log(data);
var totalTemp = [];
var temp=[];
var temp2 = [];
if(data.status==0){
var entities = data.entities;
if(entities.length<0){
return ;
}
for(var i=0;i<entities.length;i++){
var entity = entities[i];
var locTime = entity.latest_location.loc_time;
var lon = entity.latest_location.longitude;
var lat = entity.latest_location.latitude;
var curTime = Date.parse(new Date())/1000;
if(locTime+600<curTime){
entity['state'] = 0;
}else{
entity['state'] = 1;
}
var locDate = fmtDate(locTime);
var ob = {
"id":entity['entity_name'],
"nick_name":entity['entity_desc'],
"id_card":entity['tel'],
"power":entity['power'],
"gate_time":locDate,
"state":entity['state'],
"create_time":entity['create_time'],
"user_id":entity['team_id'],
"count":entity['hold_num'],
"record":{
"gate_time": locDate,
"latitude": lat,
"longitude": lon
},
};
totalTemp.push(ob);
}
}
detailData = totalTemp;
for (var i = 0; i <detailData.length; i++) {
if(detailData[i].state==1){
temp.push(detailData[i]);
}else{
temp2.push(detailData[i]);
}
}
detailDataOnline=temp;
detailDataOffline=temp2;
render();
console.log(detailDataOffline);
}
//ajax获取数据当前所有用户信息列表
function getdata(){
var data = {
'ak':'7isb5V1OeAamqDkMICsp3Yaz',
'service_id':'154508',
'filter':'entity_names:1,2,3'
};
$.ajax({
url:searchUrl,
type:"GET",
async:true,
data:data,
dataType:'jsonp',
success:function(data){
ajaxDataProcess(data);
}
});
}
//渲染页面模板
function render(){
var onlinelist = template('detailTemplate_tmp', {list:detailDataOnline});
var alllist= template('detailTemplate_tmp', {list:detailData});
// namelist = template('monitorNameTmp', {nameList:detailData});
var val = $("#nickName").val();
if(val!=''){
$('#detailTemplate').html(alllist);
}else{
$('#detailTemplate').html(onlinelist);
}
// setKeloopBear();
openInfo(detailDataOnline);
// $("#monitorName").append(namelist);
displayPath(detailDataOnline);
setOnOffNum();
}
function setOnOffNum(){
$("#onoffline").empty();
var onNum = detailDataOnline.length;
var offNum = detailDataOffline.length;
$("#onoffline").append("<option value='1'>在线("+onNum+")人</option><option value='2'>离线("+offNum+")人</option>");
}
function displayOnOff(){
var val = $("#onoffline").val();
if(val==1){
circledata = setInterval("getdata()", 10000);
$('#detailTemplate').html(template('detailTemplate_tmp', {list:detailDataOnline}));
openInfo(detailDataOnline);
displayPath(detailDataOnline);
}else{
clearInterval(circledata);
$('#detailTemplate').html(template('detailTemplate_tmp', {list:detailDataOffline}));
openInfo(detailDataOffline);//显示离线人员位置
if(polylines.length>0){
removeMapOverLay(polylines);
};
}
}
function queryNickName(){
var val = $("#nickName").val();
if(val!=''){
var data = {
'ak':'7isb5V1OeAamqDkMICsp3Yaz',
'service_id':'154508',
'filter':'entity_names:1,2,3|entity_desc:'.val
};
$.ajax({
url:searchUrl,
type:"GET",
async:true,
data:data,
dataType:'jsonp',
success:function(data){
ajaxDataProcess(data);
}
});
clearInterval(circledata);
}else{
fresh();
}
}
/*构建配送员标记*/
//obj代表要展示定位的对向列表，有detailData（所有配送员）detaiDataOnline(在线配送员）
function openInfo(obj){
removeMapOverLay(markers);
if(!obj){
return;
}
for (var i = 0;i < obj.length;i++){
var k = [];
if(obj[i].record){
k[0] = obj[i].record.longitude;
k[1] = obj[i].record.latitude;
var icon = '';
if(obj[i].state==1){
icon = '__STATIC__/img/gps/person.png';
}else{
icon = '__STATIC__/img/gps/offperson.png';
}
var pt = new BMap.Point(k[0],k[1]);
var myIcon = new BMap.Icon(icon, new BMap.Size(300,157));
var marker = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var label = new BMap.Label(obj[i].nick_name,{offset:new BMap.Size(0,-25)});
marker.setLabel(label);
var content ='<p class="fontb" ><b>'+obj[i].nick_name+'</b></p><hr>'+
'<p class="fontb">坐标时间 ：'+obj[i].record.gate_time+'</p>' +
'<p class="fontb" >当前持单量 ：'+obj[i].count+'</p>';
var opts = {
width : 300, // 信息窗口宽度
height: 100, // 信息窗口高度
offset: new BMap.Size(0,-25)
}
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,pt); //开启信息窗口
});
markers.push(marker);
$("#sign_"+obj[i].id).data("longitude",k[0]).data("latitude",k[1]).data('id',obj[i].id);
}
}
}
/*添加监控的配送员*/
function addUser(){
$("#gps_user").show();
$("#id_card").val("");
$("#nick_name").val("");
$("#device_imei").val("");
}
//设置已添加配送员信息
function updateUser(f){
var ck = $(f).data("charactor");
if(ck == 1){
$("#type_deviceU").show();
$("#type_keloopU").hide();
$("#id_cardU").val($(f).data("card"));
$("#nick_nameU").val($(f).data("name"));
$("#device_imeiU").val($(f).data("imei"));
}else{
$("#type_keloopU").show();
$("#type_deviceU").hide();
$("#keloop_nick_nameU").val($(f).data("name"));
$("#keloop_id_cardU").val($(f).data("card"));
}
$("#gps_userU").show();
var _$id = "#"+ck;
$(_$id).prop("checked",true);
id= $(f).data("id");
}
//点击图标maker移到地图中央
function focusCenter(obj){
var id=$(obj).data("id"),
clickLatitude = $(obj).data("latitude"),
clickLongitude = $(obj).data("longitude");
var pt = new BMap.Point(clickLongitude,clickLatitude);
map.setCenter(pt);
for(var i=0;i<detailData.length;i++){
if(detailData[i].id==id){
if(detailData[i].state==1){
displayPath([detailData[i]]);
}
openInfo([detailData[i]]);
break;
}
}
}
//添加信息提交
function add(){
// var from = $("input[name='from']:checked").val();
var from = 1;
if(from == 1){
imei = $("#device_imei").val();
idCard = $("#id_card").val();
nickName = $("#nick_name").val();
}else if(from == 2){
if($("#keloop_couriers").length>0){
idCard = $("#keloop_couriers").val();
nickName = $('#keloop_couriers option:selected').data('name');
}else{
idCard = $("#keloop_id_card").val();
nickName = $("#keloop_nick_name").val();
}
}
$.ajax({
url:"/Api/PointRecord/addDevice",
type:"POST",
data:{
from:from,
imei:imei,
idCard:idCard,
nickName:nickName,
},
success:function(data){
if(data.code == "200"){
$("#gps_user").hide();
getdata();
render();
// setKeloopBear();
}else{
clearpop(data.message);
}
}
})
};
//更改信息提交
function update(){
// var from = $("input[name='fromU']:checked").val();
var from = 1;
if(from == 1){
idCard = $("#id_cardU").val();
nickName = $("#nick_nameU").val();
imei=$('#device_imeiU').val();
}else if(from == 2){
idCard = $("#keloop_id_cardU").val();
nickName = $("#keloop_nick_nameU").val();
}
$.ajax({
url:"/Api/PointRecord/updateDevice",
type:"POST",
data:{
from:from,
idCard:idCard,
nickName:nickName,
id:id,
imei:imei
},
success:function(data){
if(data.code == "200"){
$("#gps_userU").hide();
getdata();
render();
// setKeloopBear();
}else{
clearpop(data.message);
}
}
})
}
//删除信息提交
function del(){
if(confirm("确认删除？")){
idCard = $("#id_cardU").val();
nickName = $("#nick_nameU").val();
$.ajax({
url:"/Api/PointRecord/deleteDevice",
type:"POST",
data:{
id:id
},
success:function(data){
if(data.code == "200"){
$("#gps_userU").hide();
getdata();
render();
// setKeloopBear();
}else{
clearpop(data.message);
}
}
})
}
}
function removeMapOverLay(overLays){
if(overLays.length>0){
for(var i=0;i<overLays.length;i++){
map.removeOverlay(overLays[i]);
}
};
}
//显示配送员轨迹
function displayPath(obj){
removeMapOverLay(polylines);
var num = obj.length;
var colors = [
"#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
"#651067", "#329262", "#5574a6", "#3b3eac"
];
if(num>0){
for(var i=0;i<num;i++){
var tel = obj[i].id_card;
var lon = obj[i].record.longitude;
var lat = obj[i].record.latitude;
var curData = [];
if(tel!=undefined&&lon!=undefined&&lat!=undefined){
if(($.inArray(tel,pathName)==-1||pathName.length==0)){
var pt = new BMap.Point(lon, lat);
var dataJson = {
'tel':tel,
'point':[pt],
};
pathData.push(dataJson);
pathName.push(tel);
}else{
for(var j=0;j<pathData.length;j++){
if(pathData[j].tel==tel){
var pt = new BMap.Point(lon, lat);
pathData[j].point.push(pt);
var curData = pathData[j].point;
var oldData = curData.map(function(val){
return val;
});
if(curData.length>2){
var color = '';
for(var n=0;n<pathColor.length;n++){
if(pathColor[n].tel==tel){
var color = pathColor[n].color;
break;
}
}
if(color==''){
var color = getColorByRandom(colors);
pathColor.push({'tel':tel,'color':color});
}
var polyline = new BMap.Polyline(curData,
{
strokeColor:color,
strokeWeight:6,
strokeOpacity:1,
strokeStyle: "dashed",
strokeDasharray:[10, 5]
}
);
map.addOverlay(polyline);
polylines.push(polyline);
curData = oldData;
}
}
}
}
}
}
}
}
function getColorByRandom(colorList){
var colorIndex = Math.floor(Math.random()*colorList.length);
var color = colorList[colorIndex];
colorList.splice(colorIndex,1);
return color;
}
</script>
扫一扫
3306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
