`

【map】使用高德地图显示地图轨迹

javascript 
阅读更多 
<!DOCTYPE HTML>
<html >
<head>
##全屏显示
<style type="text/css">  
html { height: 100%}  
body {height:100%;margin:0px;padding:0px}  
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轨迹回放</title>
<link rel="stylesheet" type="text/css" src="./map.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script language="javascript">
var mapObj;
//初始化地图对象，加载地图
function mapInit(){
    mapObj = new AMap.Map("iCenter",{
		zooms:[7,17],
        //二维地图显示视口
        view: new AMap.View2D({
            center:new AMap.LngLat(116.397428,39.90923),//地图中心点
			
            zoom:13 //地图显示的缩放级别
			
        }),
        continuousZoomEnable:false
    });
    AMap.event.addListener(mapObj,"complete",completeEventHandler);    
}
 
//地图图块加载完毕后执行函数
function completeEventHandler(){ 
    marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.397428,39.90923),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
     
	 
	 
	     marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.427907,39.909270),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
	
	
	    marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.432303,39.909320),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
	
	
	    marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.424767,39.961329),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
	
		    marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.444317,39.960287),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
	
	
    var lngX = 116.397428;
    var latY = 39.90923;       
    lineArr = new Array();
    lineArr.push(new AMap.LngLat(lngX,latY));

        lineArr.push(new AMap.LngLat(116.427907,39.909270));
		lineArr.push(new AMap.LngLat(116.432303,39.909320));
		lineArr.push(new AMap.LngLat(116.424767,39.961329));
		lineArr.push(new AMap.LngLat(116.444317,39.960287));

      //绘制轨迹
    var polyline = new AMap.Polyline({
        map:mapObj,
        path:lineArr,
  strokeColor:"#00A",//线颜色
        strokeOpacity:1,//线透明度
        strokeWeight:3,//线宽
        strokeStyle:"solid"//线样式
    });
    mapObj.setFitView();
  }

</script>
<style>
#iCenter{}
</style>
</head>
<body onLoad="mapInit()" width:100%;height:100%;>
    <div class="iCenter" id="iCenter" ></div>
 
</body>
</html>
  • 大小: 30.7 KB
  • 大小: 92.3 KB
  • 大小: 94.5 KB
分享到：
| 【lincese】lincese设计方案
评论
3 楼 aaddsfdsfsdfs 2016-11-04  
var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });
    var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var polyline = new AMap.Polyline({
        path: lineArr,          //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeOpacity: 1,       //线透明度
        strokeWeight: 5,        //线宽
        strokeStyle: "solid",   //线样式
        strokeDasharray: [10, 5] //补充线样式
    });
    polyline.setMap(map);

http://lbs.amap.com/api/javascript-api/example/overlayers/polyline-circle-polygon/
这边有详细的说明(web端的)
2 楼 di1984HIT 2015-12-25  
不好用啊？？？
1 楼 di1984HIT 2015-12-25  
学习了～～～～
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics