1.申请密匙
<script src="https://webapi.amap.com/maps?v=1.3&key=您的值
&plugin=AMap.Autocomplete,AMap.Walking,AMap.PlaceSearch,
AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Driving,AMap.CitySearch"
2.定义页面位置
<div id="mapContainer" style="width: 100%; height: 100%;position: absolute"></div>
3.初始化地图
$(document).ready(function () {
map = new AMap.Map("mapContainer", {
view: new AMap.View2D({//创建地图二维视口
zoom: 17, //设置地图缩放级别
rotation: 0
//设置地图旋转角度
}),
lang: "zh_cn"//设置地图语言类型,默认:中文简体
});//创建地图实例
//在地图中添加ToolBar插件
map.plugin(["AMap.ToolBar"], function () {
toolBar = new AMap.ToolBar();
map.addControl(toolBar);
});
});
4.标记点
function markerLatlng(lng,lat) {
marker = new AMap.Marker({
map: map,
position: [lng, lat],
// icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true,//是否自动旋转。 // 广泛用于自动调节车辆行驶方向。
angle:-90,//点标记的旋转角度
});
}
5.描绘轨迹
function polylineGps() {
// 使用clearMap方法删除所有覆盖物
map.clearMap();
// 绘制轨迹
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir:true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
map.setFitView();
}
注释:
lineArr = [];//经纬度数组
$.each(data, function (i, val) {
var line = [val.lng,val.lat];
lineArr.push(line);
});