google地图api js调用完整教程（路径回放） |
您所在的位置：网站首页 › 苹果手机谷歌地图使用教程 › google地图api js调用完整教程（路径回放） |
google地图api js调用完整教程（路径回放）
|
google地图api js调用完整教程（路径回放）
1，申请一个Google map api得key 目前来看，Google key激活要绑定一些国际银行卡（比如万事达，visa） 申请key详细地址 https://www.wppop.com/get-google-api-key.html 官方文档地址 https://developers.google.cn/maps/documentation/javascript/get-api-key 2，开始使用 首先引入js 3，初始化我的第一地图 #map { height: 400px; width: 100%; } My Google Maps Demo function initMap() { var uluru = {lat: -25.344, lng: 131.036}; var map = new google.maps.Map( document.getElementById('map'), {zoom: 4, center: uluru}); var marker = new google.maps.Marker({position: uluru, map: map}); }效果见图 4，简单的一些用法我就不多讲，官方文档都有，下面我主要讲高级用法，比如定位跟踪，路径回放 4.1定位跟踪 GPS轨迹跟踪 #for(t:DevList) #(t.dev_id) #end 搜索 function initMap() { var selectDev=$('#dev_id option:selected').text(); var selectName=$('#dev_id option:selected').val(); if(selectDev!=""){ $.when($.ajax(gzmine+"/api/legacy/device/state/"+ encodeURIComponent(selectDev)+"?page=1&rows=1")).done(function(state){ if(state.rows.length!=0){ //以下示例使用DROP在瑞典斯德哥尔摩创建标记 // 动画。 单击标记将在BOUNCE之间切换动画 //动画，没有动画。 var marker; var uluru = {lat: parseFloat(state.rows[0].lat), lng: parseFloat(state.rows[0].lng)}; var map = new google.maps.Map(document.getElementById('pathmap'), { zoom: 13, center: uluru, scaleControl: true, mapTypeId: 'terrain' }); //画图工具 var drawingManager = new google.maps.drawing.DrawingManager({ //drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT, drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] }, markerOptions: {icon: '#(ctx)/common/img/google-icon/hua.png'}, circleOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1 } }); drawingManager.setMap(map); map.setTilt(45); var dir ="#(ctx)/common/img/dev-icon/"; var src= dir + selectName+'.png'; var image = { url: src, //该标记宽32像素，高32像素。 scaledSize: new google.maps.Size(32, 32) }; var contentString = ''+ ''+ ''+ ''+selectDev+''+ ''+ '驾驶员：'+state.rows[0].driver+' '+ '里程：'+state.rows[0].odometer+' '+ ''+ ''; var infowindow = new google.maps.InfoWindow({ content: contentString }); marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: uluru, icon: image }); infowindow.open(map, marker); marker.addListener('click', function() { infowindow.open(map, marker); }); marker.addListener("dblclick", function(){ doPjax('#(ctx)/admin/devlocation/getDetailPage?devid='+encodeURIComponent(selectDev)+'&devname='+encodeURIComponent(selectName)); }); }else{ alert("该设备没有定位数据！") } }) } } $(document).ready(function() { $('#dev_id').chosen({width : '95%'}); });效果图 4.2路径回放 .progress{position: relative; width:300px;} .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;} .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;} .progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#000; left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;} .progress_btn:hover{border-color:#F7B824;} GPS轨迹跟踪 #for(t:DevList) #(t.dev_id) #end 查询 播放 暂停 停止 播放速度： 0% var clock; var currentNode=0; var flightPath; var total=0; var carMk=null; var tag = false,ox = 0,left = 150,bgleft = 0; var map; function initMap() { currentNode=0; var loc={}; var loc2={}; data=[]; data2=[]; if($('#dev_id option:selected').text()!=""){ $.when($.ajax(gzmine+"/api/legacy/device/state/"+ encodeURIComponent($('#dev_id option:selected').text())+"?page=1&rows=2000&begin="+$('#beginTime').val()+"&end="+$('#endTime').val()),$.ajax(ctx+"/admin/devinfo/getDevNameById?devId="+encodeURIComponent($('#dev_id option:selected').text()))).done(function(state,devName){ if(state[0].total!=0){ $.each(state[0].rows,function(index, value){ loc={ speed:value.speed, driver:value.driver, odometer:value.odometer, time:value.time } loc2={ lat:parseFloat(value.lat), lng:parseFloat(value.lng), } if(loc2.lng>0&&loc2.lat>0){ data.push(loc) data2.push(loc2) } }) total=data2.length; initTable(); map = new google.maps.Map(document.getElementById('tracemap'), { zoom: 13, center: data2[0], scaleControl: true, mapTypeId: 'hybrid' }); //画图工具 var drawingManager = new google.maps.drawing.DrawingManager({ //drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT, drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] }, markerOptions: {icon: '#(ctx)/common/img/google-icon/hua.png'}, circleOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1 } }); drawingManager.setMap(map); map.setTilt(45); var start = data2[0]; var color1="blue"; for (var i = 1; i 30){ color1="red"; }else { color1="blue"; } flightPath = new google.maps.Polyline({ path: [ {lat: start.lat, lng: start.lng},{lat: data2[i].lat, lng: data2[i].lng}], geodesic: true, strokeColor: color1, strokeOpacity: 1.0, strokeWeight: 2 }); flightPath.setMap(map); start=data2[i]; } addMarker(data2[0], map,'起'); addMarker(data2[data2.length-1], map,'终'); } else{ alert("时间段内无状态信息") } }) } } // 起始点 function addMarker(location, map,lab) { var marker = new google.maps.Marker({ position: location, label: lab, map: map }); } function runMap() { var selectName=$('#dev_id option:selected').val(); var selectDev=$('#dev_id option:selected').text(); var dir ="#(ctx)/common/img/dev-icon/"; var src= dir + selectName+'.png'; var image = { url: src, //该标记宽32像素，高32像素。 scaledSize: new google.maps.Size(32, 32) }; if(carMk!=null){ carMk.setMap(null); } carMk = new google.maps.Marker({ position:data2[currentNode], map: map, icon: image }); var contentString; var infowindow=null; clock = setInterval(function(){ if(document.getElementById("tracemap") === null) clearInterval(clock); if(currentNode= 0 && i new Date().getTime()?new Date().getTime():stringToDate($('#beginTime').val()).getTime()+1000*259200)); }); $('#endTime').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1, format:"yyyy-mm-dd hh:ii:ss", }); $('.progress_btn').css("left",150) $('.progress_btn').mousedown(function(e) { ox = e.pageX - left; tag = true; if(currentNode!=0){ pause(); runMap(); } }); $(document).mouseup(function() { tag = false; }); $('.progress').mousemove(function(e) {//鼠标移动 if (tag) { left = e.pageX - ox; if (left 300) { left = 300; } $('.progress_btn').css('left', left); $('.progress_bar').width(left); $('.text').html(parseInt((left/300)*100) + '%'); if(currentNode!=0){ pause(); runMap(); } } }); $('.progress_bg').click(function(e) {//鼠标点击 if (!tag) { bgleft = $('.progress_bg').offset().left; left = e.pageX - bgleft; if (left 300) { left = 300; } $('.progress_btn').css('left', left); $('.progress_bar').animate({width:left},300); $('.text').html(parseInt((left/300)*100) + '%'); } }); });效果图 |
END【本文地址】