js 百度地图
来源：互联网 发布：php pack 打包字符串 编辑：程序博客网 时间：2024/05/17 02:33
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>阅读全文
0 0
- js百度地图
- js引入百度地图
- js百度地图
- js调用百度地图
- 百度地图js小结
- 百度地图JS
- 百度地图JS--2
- 百度地图 js使用
- JS实现百度地图
- 百度地图定位js
- 百度地图JS定位
- js 百度地图api
- js 百度地图
- JS调用百度地图API
- js使用百度地图服务
- 百度地图JS调用示例
- js-调用百度地图api
- js调用百度地图API
- list
- C++——对象的创建与使用（一）
- EA&UML日拱一卒-多任务编程超入门-（5） 对症下药
- ROS程序开机自启动
- python入门1之 list、tuple、dict、set的基本要点
- js 百度地图
- 角谷定理
- spring 整合hibernate Caused by: java.lang.ClassNotFoundException: javax.persistence.Entity
- Hibernate cascade
- Unity如何用网格绘制一个正五边形
- 如何在同一系统里同时启动多个Tomcat
- mysql的基本设定
- java扫描文件夹下面的所有文件（递归与非递归实现）
- $(window).scrollTop()和$(document).scrollTop()区别
