<!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>
【map】使用高德地图显示地图轨迹
最新推荐文章于 2023-03-25 18:31:20 发布