JS谷歌地图画静态轨迹/路线

html——引入api，需翻墙

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=your key&sensor=false"></script>

<div id="mapBox"></div>

js

//初始化地图
var mapOptions = {
    center: new google.maps.LatLng('30.193481084820213', '120.26757818570476'),
    zoom: 14,
}
var map = new google.maps.Map(document.getElementById("mapBox"), mapOptions);

var allMarker=[]//点的集合
var line //线

//根据条件查询轨迹
document.getElementById("search-btn").onclick(function(){
	//请求接口查数据
	//…………
	//注意！这里需要清除地图上一次查询的结果，即点、线
	if(allMaker.length>0){
        allMaker.forEach(function(item){
            item.setMap(null)
        })
        allLine.setMap(null)
    }
	createLine(result)
})
function createLine(data){
	//模拟经纬度数据
	var data = [
	  {lng: 120.439847166581, lat: 30.2522150957202, geoPoint: "POINT(120.439847166581 30.2522150957202) "},
	  {lng: 120.451070903891, lat: 30.233663500944, geoPoint: "POINT(120.451070903891 30.233663500944) "},
	  {lng: 120.427440217306, lat: 30.2219805090391, geoPoint: "POINT(120.427440217306 30.2219805090391) "},
	  {lng: 120.421433445845, lat: 30.2303012542633, geoPoint: "POINT(120.421433445845 30.2303012542633) "},
	  {lng: 120.413733023248, lat: 30.2272511645812, geoPoint: "POINT(120.413733023248 30.2272511645812) "},
	  {lng: 120.402487014918, lat: 30.2234543093315, geoPoint: "POINT(120.402487014918 30.2234543093315) "},
	  {lng: 120.39852028727, lat: 30.2223401021754, geoPoint: "POINT(120.39852028727 30.2223401021754) "},
	  {lng: 120.394509903467, lat: 30.2207843185459, geoPoint: "POINT(120.394509903467 30.2207843185459) "},
	  {lng: 120.37207294839, lat: 30.2163453816874, geoPoint: "POINT(120.37207294839 30.2163453816874) "},
	];
	//设置中心点
	map.setCenter(new google.maps.LatLng(data[0].lat, data[0].lng))
	//线-数据集合
	var latlngArr = []
	for (var i = 0; i < data.length; i++) {
	    latlngArr[i] = new google.maps.LatLng(data[i].lat, data[i].lng);
	}
	//画线
	line = new google.maps.Polyline({
	   path: latlngArr,
	   strokeColor: "blue",
	   strokeOpacity: .8,
	   strokeWeight: 10,
	   map: map,
	});
	//中间点样式
	var style = {
	   path: google.maps.SymbolPath.CIRCLE,
	   fillColor:'#fff',//符号填充的颜色
	   fillOpacity:1,//填充的透明度,默认0
	   strokeColor:'blue',//符号边框的颜色
	   scale: 6,//缩放大小的数量
	   strokeWeight:1,//符号轮廓的粗细。默认值为scale符号的。
	};
	//起点样式
	var start = {
	   url:"../static/img/start.png",
	   //size: new google.maps.Size(11, 11),//大小
	   //origin: new google.maps.Point(0, 0),
       //scaledSize: new google.maps.Size(0, 0),
	   anchor: new google.maps.Point(25, 40)//偏移量
	}
	//终点样式
	var end = {
	   url:"../static/img/end.png",
	   anchor: new google.maps.Point(25, 40)
	}
	//画出线上的点
	for (var i = 0; i < data.length; i++) {
	   var image ;
	   if (i==0){
	       image = start //起点
	   }else if(i==data.length-1){
	       image = end //终点
	   }else{
	       image = style //中间点
	   }
	   var marker = new google.maps.Marker({
	       position: {lat:data[i].lat, lng:data[i].lng},
	       map: map,
	       icon: image
	   });
	   clickMarker(marker,data[i])//点的点击事件，直接写在循环里的话只显示最后一个的点信息，所以要写在外面
	   allMarker.push(marker)
	}
}
var infowindow = new google.maps.InfoWindow();//信息窗口
//每个marker的信息窗口
function clickMarker(marker,data){
   google.maps.event.addListener(marker, 'click', function () {
       var isOnline = data.online==1 ? "在線" : "下線"
       var content =  "<div>" +
           "<p>車牌號："+(data.carPlateNumber||'')+"</p>" +
           "<p>經緯度："+(data.lng||'')+"，"+(data.lat||'')+"</p>" +
           "<p>時間："+(data.time||'')+"</p>" +
           "<p>訂單號："+(data.orderId||'')+"</p>" +
           "<p>訂單狀態："+(data.orderStatusDesc||'') +"</p>" +
           "<p>司機狀態："+isOnline+"</p><div>"
       infowindow.setContent(content)
       infowindow.open(map, marker);//打开信息窗口
   });
}

效果如下