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

转载请附带原版地址：
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();}}//获取任务iddata.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();}//调用初始化方法amap.init("areaMap", amap.centerLng, amap.centerLat);//清除监听器if(data.models.model.roadType == 1){$(".roadType-2").hide();if(initListener!=undefined){AMap.event.removeListener(initListener);}selectKey();selectKeys();}else{$(".roadType-2").show();if(startListener!=undefined){AMap.event.removeListener(startListener);}if(endListener!=undefined){AMap.event.removeListener(endListener);}selectPtion();}},changeErrorRange:function () {red = parseInt(data.models.model.errorRange);//先清除之前的区域map.remove(circleArry);if(markerArray.length>0){for(var i = 0; i < markerArray.length; i++){center=[markerArray[i].getPosition().lng,markerArray[i].getPosition().lat];circleArea(center,red);}}//将用户输入的中心点，作为地图图层匹配中心点if(data.models.model.initialPoint != null && data.models.model.initialPoint != ''){center = [initLng,initLat];circleArea(center,red);}},changeRed:function () {}}}//地图初始化amap.init = function (area, lng, lat) {map = new AMap.Map(area, {resizeEnable: true,zoom: 17,center: [lng, lat]});if(data.models.model.roadType == 1) {selectKey();selectKeys();//构造路线导航类driving = new AMap.Driving({//map: map,panel: "panel",autoFitView: true});}//构造地点查询类if(data.models.model.roadType == 1){placeSearch = new AMap.PlaceSearch({autoFitView: true,//是否让所有marker显示到同一界面children:1});}else{placeSearch = new AMap.PlaceSearch({map: map,pageSize:1,//显示多少条数据，默认十条autoFitView: true,//是否让所有marker显示到同一界面children:1});//创建右键菜单menu = new ContextMenu(map);//}}//构造逆地理编码类geocoder = new AMap.Geocoder({city: "广州市", //城市设为广州，默认：“全国”radius: 1000 //范围，默认：500});//加载定位模块/*              if(map!=undefined) {AMap.plugin('AMap.Geolocation', function () {geolocation = new AMap.Geolocation({map: map,enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：5sbuttonPosition: 'RB',    //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true   //定位成功后是否自动调整地图视野到定位点});geolocationSuccess();//设置地图中心点为当前位置});}*///当页面为编辑页面的时候，地图加载完成则执行if(data.pageAction == 'edit'){if(data.models.model.roadType == 1){//定义一个变量，控制这里途经点，只加载一次var isFirst = true;map.on("complete", function () {startLng = JSON.parse(data.models.model.startPoint).lng;startLat = JSON.parse(data.models.model.startPoint).lat;endLng = JSON.parse(data.models.model.endPoint).lng;endLat = JSON.parse(data.models.model.endPoint).lat;//起点path.push([startLng,startLat]);//途经点Apoint = JSON.parse(data.models.model.points);if(isFirst && data.models.model.points != '' && data.models.model.points != null){if(Apoint.length>0){for(var i = 0; i < Apoint.length; i++){path.push([Apoint[i].lng,Apoint[i].lat]);}}isFirst = false;}//终点path.push([endLng,endLat]);//调用导航类searchPath(startLng, startLat,endLng, endLat,Apoint);//调用拖拽类movePoint(path);})} else if(data.models.model.roadType == 2){//定义一个变量，控制这里点位，只加载一次var isFirst = true;map.on("complete", function () {//marker对象数组Apoint = JSON.parse(data.models.model.points);//加载中心点placeSearch.search(data.models.model.initialPointName);//获取误差范围red = parseInt(data.models.model.errorRange);if(isFirst && data.models.model.points != '' && data.models.model.points != null){if(Apoint.length>0){for(var i = 0; i < Apoint.length; i++){var mark = [Apoint[i].lng,Apoint[i].lat];addMarker(mark);//加载图层circleArea(mark,red);}}//使用用户输入的那个点位，作为图层中心点initLng = JSON.parse(data.models.model.initialPoint).lng;initLat = JSON.parse(data.models.model.initialPoint).lat;center = [initLng,initLat];circleArea(center,red);isFirst = false;}})}}};//定位成功执行的方法function geolocationSuccess() {geolocation.getCurrentPosition(function(status,result){if(status=='complete'){//lng = result.position.lng;//lat = result.position.lat;mapCenter = result.position;map.setCenter(mapCenter);}else{bootbox.toastr("定位失败！", "error");}});}//关键字选择,起点var startListener;function selectKey() {var autoOptions = {city : "广州市",input: "startPointName"};if(startListener!=undefined){AMap.event.removeListener(startListener);}var auto= new AMap.Autocomplete(autoOptions);startListener=AMap.event.addListenerOnce(auto, "select", function (e) {placeSearch.setCity(e.poi.adcode);startLng = e.poi.location.lng;startLat = e.poi.location.lat;//将起点装入拖拽导航中，作为初始点path.push([startLng,startLat]);//将输入名称赋值给搜索项data.models.model.startPointName =e.poi.name;searchPath(startLng, startLat,endLng, endLat,Apoint);movePoint(path);});//注册监听，当选中某条记录时会触发}//关键字选择,终点var endListener;function selectKeys() {var autoOptions = {city : "广州市",input: "endPointName"};if(endListener!=undefined){AMap.event.removeListener(endListener);}var auto = new AMap.Autocomplete(autoOptions);endListener=AMap.event.addListener(auto, "select", function (e) {placeSearch.setCity(e.poi.adcode);endLng = e.poi.location.lng;endLat = e.poi.location.lat;//将终点装入拖拽导航中，作为初始点path.push([endLng, endLat]);//将输入名称赋值给搜索项data.models.model.endPointName = e.poi.name;searchPath(startLng, startLat, endLng, endLat, Apoint);movePoint(path);});//注册监听，当选中某条记录时会触发}//关键字选择,初始点位var initListener;function selectPtion() {var autoOptions = {city : "广州市",input: "initialPointName"};if(initListener!=undefined){AMap.event.removeListener(initListener);}var auto = new AMap.Autocomplete(autoOptions);initListener=AMap.event.addListener(auto, "select", function (e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询initLng = e.poi.location.lng;initLat = e.poi.location.lat;//将输入名称赋值给搜索项data.models.model.initialPointName =e.poi.name;//将点位坐标存入数据库data.models.model.initialPoint = "{"+'"lng":'+initLng+","+'"lat":'+ initLat +"}";ContextMenu(map);});//注册监听，当选中某条记录时会触发}var me;//自定义菜单类function ContextMenu(map) {me = this;//地图中添加鼠标工具MouseTool插件me.mouseTool = new AMap.MouseTool(map);me.contextMenuPositon = null;var content = [];content.push("<div class='info context_menu'>");content.push("  <p class='split_line' οnclick='menu.distanceMeasureMenu()'>距离量测</p>");content.push("  <p οnclick='menu.addMarkerMenu()'>添加标记</p>");content.push("  <p οnclick='menu.clear()'>重置标记</p>");content.push("</div>");//通过content自定义右键菜单内容me.contextMenu = new AMap.ContextMenu({isCustom: true, content: content.join('')});//地图绑定鼠标右击事件——弹出右键菜单map.on('rightclick', function (e) {me.contextMenu.open(map, e.lnglat);me.contextMenuPositon = e.lnglat; //右键菜单位置});}//菜单相关ContextMenu.prototype.distanceMeasureMenu = function () {  //右键菜单距离量测me.mouseTool.rule();me.contextMenu.close();};ContextMenu.prototype.clear = function () {  //右键菜单清除标记//marker.setMap(null);map.remove(markerArray);me.contextMenu.close();};ContextMenu.prototype.addMarkerMenu = function () {  //右键菜单添加Marker标记me.mouseTool.close();marker = new AMap.Marker({map: map,position: me.contextMenuPositon, //基点位置// 设置拖拽效果raiseOnDrag: true,// 设置是否可以拖拽draggable: true,//点标记可点clickable: true,//事件冒泡到地图层bubble: true});//设置点标记支持鼠标单击marker.setClickable(true);//将点位加入到marker数组中markerArray.push(marker);me.contextMenu.close();};//编辑的时候，回显markerfunction addMarker(mark){var marker = new AMap.Marker({map: map,position: mark, //基点位置// 设置拖拽效果raiseOnDrag: true,// 设置是否可以拖拽draggable: true,//点标记可点clickable: true,//事件冒泡到地图层bubble: true});markerArray.push(marker);}//当用户输入误差范围后，加载圆形区域function circleArea(center,red) {circle = new AMap.Circle({center: center,radius: red, //半径borderWeight: 3,strokeColor: "#FF33FF",strokeOpacity: 1,strokeWeight: 6,strokeOpacity: 0.2,fillOpacity: 0.4,strokeStyle: 'dashed',strokeDasharray: [10, 10],// 线样式还支持 'dashed'fillColor: '#1791fc',zIndex: 50})circle.setMap(map);// 缩放地图到合适的视野级别map.setFitView([circle]);circleArry.push(circle);}//导航线路function searchPath(startLng, startLat,endLng, endLat,Apoint){if(isNaN(startLng) ||  isNaN(startLat) ||  isNaN(endLng) ||  isNaN(endLat) || startLng == undefined||  startLat == undefined ||  endLng == undefined ||  endLat == undefined){return;}// 根据起终点经纬度规划驾车导航路线driving.search(new AMap.LngLat(startLng, startLat), new AMap.LngLat(endLng, endLat),{waypoints:Apoint}, function(status, result) {//driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResultif (status === 'complete') {log.success('绘制驾车路线完成')//当起点和终点都不为空的时候，设置输入框为只读if(startLng != undefined && startLng != null && endLng != undefined && endLng != null){$("#startPointName").attr("readonly","readonly");$("#endPointName").attr("readonly","readonly");}} else {log.error('获取驾车数据失败：' + result)}});}//构造拖拽导航类function movePoint(path) {if(path.length >1){route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE);route.search(); //查询导航路径并开启拖拽导航route.on("complete", function () {//获取拖拽后的点startLng = route.$q[0].lng;startLat = route.$q[0].lat;//终点endLng = route.$q[route.$q.length-1].lng;endLat = route.$q[route.$q.length-1].lat;//途经点Apoint = route.getWays();//点位改变后，再次调用路线导航searchPath(startLng, startLat,endLng, endLat,Apoint);//拖拽位置改变后，改变输入框的值和点位的值geocoder.getAddress([startLng,startLat], function(status, result) {if (status === 'complete'&&result.regeocode) {data.models.model.startPointName = result.regeocode.formattedAddress;data.models.model.startPoint = "{"+'"lng":'+startLng+","+'"lat":'+ startLat +"}";}else{log.error('根据经纬度查询地址失败')}});//拖拽位置改变后，改变输入框的值geocoder.getAddress([endLng,endLat], function(status, result) {if (status === 'complete'&&result.regeocode) {data.models.model.endPointName = result.regeocode.formattedAddress;//将经纬度设置到点位中data.models.model.endPoint = "{"+'"lng":'+endLng+","+'"lat":'+ endLat+"}";}else{log.error('根据经纬度查询地址失败')}});});}}//调用初始化方法$(function () {amap.init("areaMap", amap.centerLng, amap.centerLat);});//重写保存方法page.save = function () {if (!page.validateForm.valid()) {bootbox.toastr("表单验证未通过", "error");return;}if(data.models.model.roadType == 1){//获取最终的所有途经点信息if(route.getWays().length>0){//先清空points中的数据data.models.model.points = "";data.models.model.points +="[";for(var i = 0; i < route.getWays().length ; i++){data.models.model.points += "{"+'"lng":'+route.getWays()[i].lng+","+'"lat":'+route.getWays()[i].lat+"},";}//去掉最后一个逗号data.models.model.points = data.models.model.points.substring(0, data.models.model.points.lastIndexOf(','));//拼接最后一个中括号data.models.model.points += "]";}}if(data.models.model.roadType == 2){//获取所有点位信息(添加的marker点)if(markerArray.length>0){data.models.model.points = "";data.models.model.points +="[";for(var i = 0; i < markerArray.length; i++){data.models.model.points += "{"+'"lng":'+markerArray[i].getPosition().lng+","+'"lat":'+markerArray[i].getPosition().lat+"},";}//去掉最后一个逗号data.models.model.points = data.models.model.points.substring(0, data.models.model.points.lastIndexOf(','));//拼接最后一个中括号data.models.model.points += "]";}}var postModel = data.models.model;//后台处理保存数据$.ajax({type: "post",url: "/usual/taskRoadMap/saveMap",data: postModel,async: false,success: function (result) {if (result && result.success) {bootbox.toastr('保存成功');page.close(result);} else {bootbox.alert("保存失败");}}});}</script>

最终效果图，本代码包含起终点定位导航和单点定位，点位标记等。

线路中的任意点都是可以拖拽的，拖拽之后下方红框中的导航路线会重新生成

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

高德地图2020最新版下载导航wince_导航定位错误致青城山严重拥堵，高德地图回应：已优化...
钛媒体 TMTPost.com|科技引领新经济| ▎景区官方表示,错误导航问题已存在多年,景区多次与高德地图方联系,要求对青城前山景区导航路线进行修改优化,但均未果. 钛媒体编辑丨石万佳钛媒体App ...
高德地图发布AI智能公交导航
高德地图日前发布新一代公交出行产品--AI智能公交导航,利用高德地图的大数据及机器学习能力,为用户公交出行提供智能导航出行解决方案. "如今驾车.乘车用户需求备受关注,有许多行业创新,但在出 ...
路痴福音！高德地图上线真AR步行导航，可实景指引
2月8日消息,高德地图近日发布V10.76新版本,上线真AR步行导航,借助智能定位.地图导航与AR渲染等技术,可在真实拍摄的道路画面上,呈现更加直观的3D实景指引,帮助方向感不强的用户解决起步找方向难 ...
C#窗体调用地图（高德地图）-实现公交线路查询
C#窗体调用地图(高德地图)-实现公交线路查询新建C#工程–创建Windows窗体应用程序添加WebBrowser控件(用来显示网地图页)可以把滚动条(ScrollBarsEnabled)设置成f ...
Android 整合高德地图SDK实现地图预览,定位,模拟导航
一.准备工作 1. 到高德地图官方网申请key: 我的应用 | 高德控制台 2. 申请key方法请参考:获取Key-创建工程-开发指南-Android 地图SDK | 高德地图API 3. 出现的问题 ...
vue 高德地图不同区域显示不同颜色_联测科技丨高德地图不仅仅是拿来导航的...
高德地图不仅仅当做一个导航工具,他还有许多不一样的用途. 隐藏功能一:制作高大上的PPT地图高德地图强悍的功能,我们需要进入这个网站:https://lbs.amap.com,也就是高德开放平台. ...
地图上分成一块一块区域高德地图_开车用哪个导航最好？看看老司机总结的地图对比，学会不吃亏...
大家好我是喵哥,现在外出开车不可避免的都会使用导航,而比较主流的无非就是高德和百度,所以今天喵哥就跟大家对比一下百度和高德这两款导航它们之间的优势和劣势,首先喵哥以广州火车站为终点,然后两个地图同时规 ...
百度地图AndroidSDK：定位、画区域、线路规划、搜索
参考学习: 百度地图官网: androidsdk/guide/basicmap - Wiki http://lbsyun.baidu.com/index.php?title=androidsdk/gu ...
js添加多marker 高德地图_h5高德地图javascript调起app导航定位多个marker
最近做的一个项目, 一开始以为是做路线规划, 后来说是做导航记录下代码 // 获取商品集合集合并且传回来的是名称和经纬度 getShop : function(){ $.ajax({ ...

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

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

最新文章

热门文章