google地图api js调用完整教程（路径回放）

最新推荐文章于 2025-03-13 10:30:58 发布
置顶 最新推荐文章于 2025-03-13 10:30:58 发布
阅读量4.2k 收藏 13
点赞数 1
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43072292/article/details/98749610
版权

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

 <!-- google地图js 国内使用这个地址，这是Google提供给国内的地址-->
    <script src="http://ditu.google.cn/maps/api/js?key=你的key&callback=initMap&libraries=drawing"
            type="text/javascript"></script>
            
 <!-- google地图js 国外使用这个地址-->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

3，初始化我的第一地图

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;  
        width: 100%;  
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
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});
}
    </script>
  <script src="http://ditu.google.cn/maps/api/js?key=你的key&callback=initMap&libraries=drawing"
            type="text/javascript"></script>
  </body>
</html>

效果见图
在这里插入图片描述

4，简单的一些用法我就不多讲，官方文档都有，下面我主要讲高级用法，比如定位跟踪，路径回放

4.1定位跟踪

 <div id="page-content">
	<div class="col-lg-12">
		<div class="panel">
			<div class="panel-heading">
				<h3 class="panel-title">GPS轨迹跟踪</h3>
			</div>
			<div class="panel-body">
				<div class="pull-left" id="query-devname"
					style="padding-bottom: 10px;">
					<select id="dev_id" type="text" name="keyword" data-placeholder="请选择一个设备编号"						 
						v-model="lookupType" class="form-control">
						<option value=""></option>
		                #for(t:DevList)
		                     <option data-name="#(t.dev_name)" value="#(t.dev_name)">#(t.dev_id)</option>
		                #end
					</select>
				</div>
				<div class="btn-group">
					<button id="btn_search" onclick="initMap()" type="button"
						class="btn btn-primary btn-space">
						<span class="fa fa-search" aria-hidden="true"
							class="btn-icon-space"></span> 搜索
					</button>
				</div>
				<div id="pathmap" style="width: 100%; height: 600px;"></div>
			</div>
		</div>
	</div>
</div>
<script>

	
	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 = '<div id="content">'+
                            '<div id="siteNotice">'+
                            '</div>'+
                            '<h3 id="firstHeading" class="firstHeading">'+selectDev+'</h3>'+
                            '<div id="bodyContent">'+
                            '<p>驾驶员：'+state.rows[0].driver+'</p>'+
                            '<p>里程：'+state.rows[0].odometer+'</p>'+
                            '</div>'+
                            '</div>';

                        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%'});
		
	});
</script>

效果图
在这里插入图片描述

4.2路径回放

<style>
 .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;}
 </style>
<div id="page-content">
	<div class="col-lg-12">
		<div class="panel">
			<div class="panel-heading">
				<h3 class="panel-title">GPS轨迹跟踪</h3>
			</div>
			<div class="panel-body">
				<div class="pull-left" id="query-devname"
					style="padding-bottom: 10px;">
					<select id="dev_id" type="text" name="keyword" data-placeholder="请选择一个设备编号"						 
						v-model="lookupType" class="form-control">
						<option value=""></option>
		                #for(t:DevList)
		                     <option data-name="#(t.dev_name)" value="#(t.dev_name)">#(t.dev_id)</option>
		                #end
					</select>
				</div>
				<div style="float: left; margin-right: 5px;">
					<input id="beginTime" type="text" class="form-control" name="beginTime"
						placeholder='开始时间'>
				</div>
				<div style="float: left; margin-right: 5px;">
					<input id="endTime" type="text" class="form-control" name="endTime"
						placeholder='结束时间'>
				</div>
				<div style="float: left; margin-right: 5px;">
					<button id="btn_search1" onclick="initMap()" type="button"
						class="btn btn-primary btn-space">
						<span class="fa fa-search" aria-hidden="true"
							class="btn-icon-space"></span> 查询
					</button>
				</div>
				<div style="float: left; margin-right: 5px;">
					<button id="btn_search2" onclick="runMap()" type="button"
						class="btn btn-primary btn-space">
						<span class="fa fa-search" aria-hidden="true"
							class="btn-icon-space"></span> 播放
					</button>			
				</div>
				<div style="float: left; margin-right: 5px;">
					<button id="btn_search3" onclick="pause()" type="button"
						class="btn btn-primary btn-space">
						<span class="fa fa-search" aria-hidden="true"
							class="btn-icon-space"></span> 暂停
					</button>			
				</div>
				<div style="float: left; margin-right: 5px;">
					<button id="btn_search4" onclick="stop()" type="button"
						class="btn btn-primary btn-space">
						<span class="fa fa-search" aria-hidden="true"
							class="btn-icon-space"></span> 停止
					</button>			
				</div>		
				<div style="float: left; margin-right: 5px;">		
					<div class="progress progress-striped active"><div style="width: 0%;" id="carBar" class="progress-bar progress-bar-dark"></div></div>
				</div>
				<div style="float: left; margin-right: 5px;">
				播放速度：
				</div>
				<div style="float: left; margin-right: 5px;">
				<div class="progress">
					<div class="progress_bg">
						<div class="progress_bar" style="width: 50%;"></div>
					</div>
					<div class="progress_btn"></div>
					<div class="text">0%</div>
				</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	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 < data2.length; i++) {
                            if(data[i].speed>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<data2.length-1){
                $('#carBar').css("width",Math.round(((currentNode+2)/data2.length) * 100)+'%')
                carRun(data2[currentNode],data2[currentNode+1]);

                 contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h3 id="firstHeading" class="firstHeading">'+selectDev+'</h3>'+
                    '<div id="bodyContent">' +
                    '<p>驾驶员：'+data[currentNode].driver+'</p>'+
                    '<p>速度：'+data[currentNode].speed+'</p>'+
                    '<p>里程：'+data[currentNode].odometer+'</p>'+
                    '<p>时间：'+data[currentNode].time+'</p>'+
                    '</div>'+
                    '</div>';
                 if(infowindow!=null){
                     infowindow.close(map, carMk);
				 }
                 infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                infowindow.open(map, carMk);

                currentNode++
            }
            else{
                clearInterval(clock);
                currentNode=0
            }
        },(300-left))

	}
    function carRun(myP1,myP2){
        carMk.setPosition(myP2);
    }
	
	function pause() {
		clearInterval(clock);
	}
	
	function stop() {
		currentNode=0;
		clearInterval(clock);
	}
	function stringToDate(s) {
		var d = new Date();
		d.setYear(parseInt(s.substring(0,4),10));
		d.setMonth(parseInt(s.substring(5,7)-1,10));
		d.setDate(parseInt(s.substring(8,10),10));
		d.setHours(parseInt(s.substring(11,13),10));
		d.setMinutes(parseInt(s.substring(14,16),10));
		d.setSeconds(parseInt(s.substring(17,19),10));
		return d;
	}
	
	function zeroFill(i){
	    if (i >= 0 && i <= 9) {
	        return "0" + i;
	    } else {
	        return i;
	    }
	}
	/**
	 * 获取当前时间 格式：yyyy-MM-dd HH:MM:SS
	 */
	function dateToString(time) {
		var date = new Date(time);
	    var month = zeroFill(date.getMonth() + 1);//月
	    var day = zeroFill(date.getDate());//日
	    var hour = zeroFill(date.getHours());//时
	    var minute = zeroFill(date.getMinutes());//分
	    var second = zeroFill(date.getSeconds());//秒
	    
	    //当前时间
	    var curTime = date.getFullYear() + "-" + month + "-" + day
	            + " " + hour + ":" + minute + ":" + second;
	    
	    return curTime;
	}
	
	$(document).ready(function() {
	    $("#disp").click(function () {
			if($(this).text()=="隐藏︽"){
				$("#pageTable").hide();
                $(this).text("显示︾");
			}else{
                $("#pageTable").show();
                $(this).text("隐藏︽");
            }
        });

		$('#dev_id').chosen({width : '95%'});
		$('#beginTime').datetimepicker({
	    	startDate: "2018-09-01",
	    	endDate:new Date(),
	        language:  'zh-CN',
	        weekStart: 1,
	        todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			forceParse: 0,
	        showMeridian: 1,
	        format:"yyyy-mm-dd hh:ii:ss"
	    }).on('changeDate', function(ev){
	    	$('#endTime').val("")
	    	$('#endTime').datetimepicker('setStartDate', $('#beginTime').val());
	    	$('#endTime').datetimepicker('setEndDate', dateToString(stringToDate($('#beginTime').val()).getTime()+1000*259200>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 <= 0) {
                 left = 0;
             }else 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 <= 0) {
                 left = 0;
             }else if (left > 300) {
                 left = 300;
             }
             $('.progress_btn').css('left', left);
             $('.progress_bar').animate({width:left},300);
             $('.text').html(parseInt((left/300)*100) + '%');
         }
     });
		
	});
</script>

效果图
在这里插入图片描述
END

js调用谷歌地图
ruirui
11-16 6278
js调用谷歌地图 src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js">>     http://ditu.google.com/maps/api/js?sensor=true">>         var geocoder;      var map;      function ini
js谷歌地图
YaToue
12-26 493
<html> <head> <script src="https://maps.googleapis.com/maps/api/js?key="> </script> <script> var myCenter = new google.maps.LatLng(39.839472,116.288262); //模拟数...
google地图的轨迹回放
09-15
加载google地图，并在google地图上播放轨迹
在Vue.js中实现基本的谷歌地图搜索功能
最新发布
weixin_36059856的博客
03-13 1138
本文还有配套的精品资源，点击获取 简介：本文介绍如何在Vue.js应用中集成谷歌地图进行搜索功能实现。内容包括使用 @googlemaps/js-api-loader 库异步加载谷歌地图JavaScript API，初始化地图并在地图上添加标注。通过具体的代码示例，展示了如何创建地图容器，设置初始视图，集成搜索框，并响应用户的搜索请求，更新地图视图和标记。使用...
js 实现谷歌地图调用
08-11
js调用谷歌地图的接口，使用js，根据传入的参数调用谷歌地图，进行相对应显示。
JS使用google地图API完成一个完整地图应用
andrewleeeeee的专栏
10-23 6092
function getMyLocation() { if (navigator.geolocation)   //navigator.geolocation属性包含整个地理定位的API，支持的主要方法是getCurrentPosition { navigator.geolocation.getCurrentPosition(displayLocation, displayError);
利用google map做轨迹回放
mengzhengjie的专栏
05-23 3495
利用google map做轨迹回放 总体思路：播放控制是FLEX处理的，首先从服务器端取得数据，然后调用FLEX的数据处理函数，主要是转换GPS点，生成一个数据列表。之后调用FLEX的播放，暂停，停止，加速，减速等方法达到我们想要的目标（在调用FLEX的播放控制函数后，FLEX会调用JS的更新GPS点的函数） 注意事项： 1.google map api参考地址：http
谷歌地图API v3开发基础与实战演练教程
总结以上，本教程详细介绍了谷歌地图API v3的基础知识，包括多点标注、叠加层、轨迹回放、事件处理等关键知识点，并通过实战演练例子加以说明。掌握了这些知识，开发者就能创建功能丰富、交互性好的谷歌地图应用。
实现Google地图定位与轨迹回放的调用方法
描述：“本实例演示了如何调用Google地图, 1.js, map.js给出了谷歌地图定位和轨迹回放的代码”说明了这个实例具体演示了如何在网页中嵌入Google地图，并实现了定位和轨迹回放的功能。这里的“1.js”和“map.js”很...
谷歌地图开发教程
11-28
1. **初始化地图**：在网页中使用谷歌地图API首先需要在HTML中创建一个容器元素，然后通过JavaScript调用`google.maps.Map`构造函数，传入容器ID和地图选项（如中心点、缩放级别等）来初始化地图。 2. **地图类型**...
基于gmap和百度地图API开发的GIS应用
05-23
百度地图API是百度提供的一款地图服务开发工具，它允许开发者通过JavaScript、Android SDK和iOS SDK来集成百度地图到自己的应用中。开发者可以使用百度地图API实现类似的功能，如地图显示、定位、导航、轨迹回放等，...
谷歌地图API
01-26
Google Maps JavaScript API V3 参考
Google map 轨迹回放
12-14
利用google map实现轨迹回放利用google map实现轨迹回放
JS调用Google地图实现单机获得地图坐标
04-12
JS调用Google地图 js获得Google地图坐标 左键单机获得google地图坐标以及中心坐标 缩放度
Google Maps JavaScript API V3 详细教程
03-19
Google Maps JavaScript API V3 详细教程
谷歌地图api调用代码
09-06
谷歌地图js的api 全部的实例调用代码
google地图API实现动画轨迹（三）
01-04 552
原文地址 点这 # google地图点击弹出InfoWindow,同时关闭上一个InfoWindow 因为项目需求原因，需要实现以下功能： - 点击地图上的每个坐标标记后显示其坐标信息 - 当有多个点时，地图上只能存在一个infowindow 解决思路如下： 首先给出google地图infowindow的一个示例用法（https://developers.google.com/map
Google Map Api 谷歌地图接口整理
热门推荐
GoodShot的专栏
04-10 1万+
<br />一：基本知识：<br /> 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥，需要注重一下两点：<br />    1.假如使用 API 的页面还没有发布，只是在本地调试，可以不用密钥，随便用个字符串代替就可以了。<br />    2.API 密钥只对网站目录或者域有效。对不同域的网页，需要用这些域分别注册不同的密钥<br />2.页面引用javascript文件<script src="http://ditu.google.com/maps?file=api&hl=zh-CN
【Google Maps JavaScript API】基础地图的创建与实现详解
lph159的博客
08-24 1280
Google Maps JavaScript API 是 Google 提供的一个基于 JavaScript 的地图服务接口，开发者可以利用它在网页中嵌入功能强大的交互式地图。无论是展示地理信息、实现导航功能，还是进行复杂的空间数据处理，Google Maps JavaScript API 都提供了丰富的工具和灵活的定制选项。在本教程中，我们将使用 Google Maps JavaScript API 创建一个基础的地图，并将其中心定位在澳大利亚的新南威尔士州的悉尼市。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值