Amap:高德地图使用

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);
});