转载请附带原版地址:
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