高德地图（包含实时定位，线路导航，区域标记等）

转载请附带原版地址：
https://blog.csdn.net/qq_39936103/article/details/107901255
谢谢！
首先引入高德地图的js，css（需连接外网）

<th:block th:fragment="page-css">
    //这里是CSS
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    //这一段是保证地图右键菜单的弹窗位置
     <style>
        .context_menu{
            position: relative;
            min-width: 12rem;
            padding: 0;
        }

        .context_menu p{
            cursor: pointer;
            padding: 0.25rem 1.25rem;
        }

        .context_menu p:hover{
            background: #ccc;
        }
    </style>
</th:block>

这里引入相关js,具体根据自己业务引入
//这里的key需要自己像高德地图申请
<script type="text/javascript"
        src="http://webapi.amap.com/maps?v=1.4.14&key=a8ab4ddc261d80c8c050f6719eb3a3ce&plugin=AMap.ControlBar,
        AMap.PolyEditor,AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch,AMap.Driving,AMap.DragRoute,
        AMap.Geolocation,AMap.MouseTool,AMap.CircleEditor"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

以下是完整逻辑代码，具体可以根据自己项目业务改写

    <script>
        var amap = {};
        var map;
        var placeSearch;
        var marker;
        var driving;
        var geolocation;
        //amap.centerLng = 113.43525;
        amap.centerLng = 113.41235;
        //amap.centerLat = 23.163357;
        amap.centerLat = 23.151157;

        //定义起点经纬度初始变量
        var startLng;
        var startLat;
        //定义终点经纬度初始变量
        var endLng;
        var endLat;
        //定义打卡初始点变量
        var initLng;
        var initLat;
        //绘制拖拽点初始路径变量
        var route;
        var path = [];
        //逆地理编码变量
        var geocoder;
        //定义途经点接收变量
        var Apoint = [];
        //定义菜单变量
        var menu;
        //定义一个marker数组
        var markerArray = [];
        //定义误差范围中心点
        var center;
        //定义误差范围半径
        var red;
        //定义一个园
        var circle;
        //定义圆的数组
        var circleArry = [];
        //定义地图中心点
        var mapCenter;


        //默认为定制线路
        if(data.pageAction == 'create'){
            data.models.model.roadType = 1;
        }else{
            if(data.models.model.roadType==2){
                $(".roadType-2").show();
            }
        }
        //获取任务id
        data.models.model.usualWorkId = $.getQueryString("usualWorkId");

        vueModel = {
            data:{
            },
            methods: {
                selectedTaskName:function () {
                    $.open("/commonselect/list?id=selectAllTask",function(m){
                        data.models.model.workTaskId = m.USUALWORKID;
                        data.models.model.taskName = m.WORKNAME;
                    },{_r : Math.random()},800,500);
                },
                changeRoadType:function () {
                    //点位类型改变的时候，重新加载地图
                    //清除残留数据（这里之所以这么操作，是因为自带的clear方法根本无法完全清除数据，监听器等则是无法清除掉，所以在这里手动清除所有数据，并移除监听器）
                    data.models.model.startPointName = '';
                    data.models.model.startPoint = '';
                    data.models.model.endPointName = '';
                    data.models.model.endPoint = '';
                    data.models.model.initialPointName = '';
                    data.models.model.initialPoint = '';
                    data.models.model.errorRange = '';
                    startLat =undefined;
                    startLng =undefined;
                    endLat =undefined;
                    endLng = undefined;
                    initLat =undefined;
                    initLng =undefined;
                    markerArray = [];
                    circleArry = [];
                    path = [];
                    center = '';
                    red = '';
                    Apoint = [];

                    if(driving!=undefined){
                        driving.clear();
                        driving=undefined;
                    }
                    if(placeSearch!=undefined){
                        placeSearch.clear