精华内容
下载资源
问答
  • 高德地图-绘制路线

    万次阅读 2019-04-23 14:14:30
    高德地图-绘制路线 效果如下图: #步骤一:使用高德地图 JS API 开发地图应用之前的一些准备工作 1.1. 在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key; HTML <...

    高德地图-绘制路线

    效果如下图:

    绘制景点之前的路线

    步骤一:使用高德地图 JS API 开发地图应用之前的一些准备工作

    1.1. 在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;

    HTML
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script> 
    

    1.2. 添加div标签作为地图容器,同时为该div指定id属性;

    HTML
    <div id="container"></div> 
    

    1.3.为地图容器指定高度、宽度;

    CSS
    #container {width:300px; height: 180px; }  
    

    1.4. 进行移动端开发时,请在head内添加viewport设置,以达到最佳的绘制性能;

    HTML
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    

    步骤二:创建地图及添加景点标记

    2.1创建地图

    JavaScript
    var map = new AMap.Map('container',{
        zoom: 10,  //设置地图显示的缩放级别
        center: [116.397428, 39.90923],//设置地图中心点坐标
        layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
        mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
        viewMode: '2D',  //设置地图模式
        lang:'zh_cn',  //设置地图语言类型
    });
    
    构造函数说明是否插件
    AMap.Map(container:String/HTMLDivElement, opts:MapOptions)构造一个地图对象,参数container中传入地图容器DIV的ID值或者DIV对象,opts地图初始化参数对象
    MapOptions类型说明
    viewView2D地图视口,用于控制影响地图静态显示的属性,如:地图中心点“center”推荐直接使用zoom、center属性为地图指定级别和中心点
    layersArray地图图层数组,数组可以是图层 中的一个或多个,默认为普通二维地图。当叠加多个图层时,普通二维地图需通过实例化一个TileLayer类实现
    zoomNumber地图显示的缩放级别
    centerLngLat地图中心点坐标值
    labelzIndexNumber地图标注显示顺序,大于110即可将底图上的默认标注显示在覆盖物(圆、折线、面)之上。
    zoomsArray地图显示的缩放级别范围在PC上,默认为[3,18],取值范围[3-18];在移动设备上,默认为[3,19],取值范围[3-19]
    langString地图语言类型可选值:zh_cn:中文简体,en:英文,zh_en:中英文对照默认为: zh_cn:中文简体注:由于图面内容限制,中文、英文 、中英文地图POI可能存在不一致的情况

    2.2.自定义景点标记

    (链接参考:https://lbs.amap.com/api/javascript-api/example/marker/adaptive-show-multiple-markers)

    JavaScript
     map.clearMap();  // 清除地图覆盖物
        //景点数据(后台数据)
        var markers = [{
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
            position: [116.205467, 39.907761]
        }, {
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
            position: [116.368904, 39.913423]
        }, {
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
            position: [116.305467, 39.807761]
        }];
    
        // 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
        markers.forEach(function(marker) {
            new AMap.Marker({
                map: map,
                icon: marker.icon,
                position: [marker.position[0], marker.position[1]],
                offset: new AMap.Pixel(-13, -30)
            });
        });
    
        var center = map.getCenter();
    
        var centerText = '当前中心点坐标:' + center.getLng() + ',' + center.getLat();
        document.getElementById('centerCoord').innerHTML = centerText;
        document.getElementById('tips').innerHTML = '成功添加三个点标记,其中有两个在当前地图视野外!';
    

    步骤三:用矢量图绘制路线

    (链接参考:https://lbs.amap.com/api/javascript-api/example/overlayers/polyline-draw-and-edit)

    3.1.绘制开始及结束

    HTML
       <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
       <script src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&plugin=AMap.PolyEditor"></script>
       <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    });
    
    HTML
       <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
       <script src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&plugin=AMap.MouseTool"></script>
       <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    });
    
    //开始绘制路线
    var path = [
          [116.362209, 39.887487],
          [116.422897, 39.878002],
          [116.372105, 39.90651],
          [116.428945, 39.89663]
      ];
    var mouseTool = new AMap.MouseTool(map)
    //定义线的风格
    function drawPolyline () {
       mouseTool.polyline({
           path: path,
           isOutline: true,
           outlineColor: '#ffeeff',
           borderWeight: 3,
           strokeColor: "#3366FF", 
           strokeOpacity: 1,
           strokeWeight: 6,
           // 折线样式还支持 'dashed'
           strokeStyle: "solid",
           // strokeStyle是dashed时有效
           strokeDasharray: [10, 5],
           lineJoin: 'round',
           lineCap: 'round',
           zIndex: 50,
       });
    }
    //结束绘制路线
    function closedrawPolyline () {
       mouseTool.close();
    }
    AMap.event.addListener(mouseTool,'draw',function(e){
    
       getPath_array = e.obj.getPath();
       map.clearInfoWindow(); //清除地图上的信息窗体。
    });
    
    构造函数说明
    MouseTool(Map)MouseTool的构造函数,目前仅支持桌面浏览器
    方法返回值说明
    open()打开编辑功能。功能开启后,通过编辑点可调整矩形的形状
    close()关闭编辑功能
    事件参数说明
    draw{type,obj}鼠标工具绘制覆盖物结束时触发此事件,obj对象为绘制出来的覆盖物对象。

    步骤四:编辑路线()新增或者删除

    (链接参考:https://lbs.amap.com/api/javascript-api/example/overlayers/polyline-draw-and-edit)

    效果如下图:

    在这里插入图片描述
    实现如下:

    HTML
    <script src="https://webapi.amap.com/maps?v=1.4.13&key=您申请的key值&plugin=AMap.PolyEditor"></script>
    <script src="${ctxPath}/static/backend/lib/amap/amap-ui-main.js"></script>
    });
    
     var path = [
          [116.362209, 39.887487],
          [116.422897, 39.878002],
          [116.372105, 39.90651],
          [116.428945, 39.89663]
      ];
       var polyline = new AMap.Polyline({
           path: path,
           outlineColor: '#ffeeff',
           strokeColor: "#0071FF",
           strokeOpacity: 1,
           strokeWeight: 6,
           strokeStyle: "dashed",
           strokeDasharray: [10, 20],
           lineJoin: 'round',
           lineCap: 'round',
           zIndex: 50,
       })
    
       polyline.setMap(map)
       // 缩放地图到合适的视野级别
       map.setFitView([ polyline ])
    
       var polyEditor = new AMap.PolyEditor(map, polyline)
    });
    

    完整路线的的展示方法

    效果如下图:
    在这里插入图片描述
    实现如下:

    HTML
    <script src="https://webapi.amap.com/maps?v=1.4.13&key=您申请的key值&plugin=AMap.BezierCurveEditor"></script>
    });
    
      var path = [
          [116.362209, 39.887487],
          [116.422897, 39.878002],
          [116.372105, 39.90651],
          [116.428945, 39.89663]
      ];
    var bezierCurve = new AMap.BezierCurve({
           path: path,
           outlineColor: '#ffeeff',
           strokeColor: "#0071FF",
           strokeOpacity: 1,
           strokeWeight: 6,
           strokeStyle: "dashed",
           strokeDasharray: [10, 20],
           lineJoin: 'round',
           lineCap: 'round',
           zIndex: 50,
       })
    
       bezierCurve.setMap(map);
       //  // 缩放地图到合适的视野级别
       map.setFitView([ bezierCurve ])
    });
    

    步骤五:根据绘制路线飞行

    (链接参考:https://lbs.amap.com/api/amap-ui/demos/amap-ui-pathsimplifier/index)
    效果如下图:
    在这里插入图片描述
    实现如下:

    function lookAMapUI(path,MARK_TYPE,Spots_arr){
       AMapUI.loadUI(['overlay/SimpleInfoWindow','misc/PathSimplifier'], function(SimpleInfoWindow,PathSimplifier) {
           // 展示路线
           if (!PathSimplifier.supportCanvas) {
               alert('当前环境不支持 Canvas!');
               return;
           }
    
           var emptyLineStyle = {
               lineWidth: 0,
               fillStyle: null,
               strokeStyle: null,
               borderStyle: null
           };
    
           var pathSimplifierIns = new PathSimplifier({
               zIndex: 110,
               //autoSetFitView:false,
               map: map, //所属的地图实例
    
               getPath: function(pathData, pathIndex) {
    
                   return pathData.path;
               },
               getHoverTitle: function(pathData, pathIndex, pointIndex) {
    
                   return null;
               },
               renderOptions: {
                   //将点、线相关的style全部置emptyLineStyle
                   pathLineStyle: emptyLineStyle,
                   pathLineSelectedStyle: emptyLineStyle,
                   pathLineHoverStyle: emptyLineStyle,
                   keyPointStyle: emptyLineStyle,
                   startPointStyle: emptyLineStyle,
                   endPointStyle: emptyLineStyle,
                   keyPointHoverStyle: emptyLineStyle,
                   keyPointOnSelectedPathLineStyle: emptyLineStyle
               }
           });
    
           window.pathSimplifierIns = pathSimplifierIns;
    
           pathSimplifierIns.setData([{
               name: '路線',
               //景点经纬度
               path: [
       			       [116.362209, 39.887487],
       			       [116.422897, 39.878002],
       			       [116.372105, 39.90651],
       			       [116.428945, 39.89663]
       			   ]
           }]);
           //initRoutesContainer(d);
    
           function onload() {
               pathSimplifierIns.renderLater();
           }
    
           function onerror(e) {
               alert('图片加载失败!');
           }
    
           navg1 = pathSimplifierIns.createPathNavigator(0, {
               speed: 3000 ,
               pathNavigatorStyle: {
                   // autoRotate: false, //禁止调整方向
                   width: 56,
                   height: 89 ,
                   initRotateDegree: 270 ,
                   content: PathSimplifier.Render.Canvas.getImageContent("../static/img/eagle.png", onload, onerror),
                   strokeStyle: null ,
                   fillStyle: null ,
                   pathLinePassedStyle: {
                       lineWidth: 6,
                       strokeStyle: '#0071FF',
                       dirArrowStyle: {
                           stepSpace: 50,
                           strokeStyle: '#fff'
                       }
                   },
               }
    
           });
           //开始飞行
           navg1.start();
           //展示飞行过程中需要操作的方法
           navg1.on('move', function(type) {
              //停止飞行
              navg1.pause();
           });
    
       });
    //    展示路线结束
    }
    

    方法

    方法名称返回值说明
    getZIndexOfPath(pathIndex:number)number返回pathIndex对应的轨迹数据项的zIndex值
    setZIndexOfPath(pathIndex:number, zIndex:number)设置pathIndex对应的轨迹数据项的zIndex值
    getPathData(pathIndex:number){*}返回pathIndex对应的轨迹数据项
    createPathNavigator(pathIndex:number, options:Object)PathNavigator创建一个轨迹巡航器。pathIndex:关联的轨迹索引 ,options:巡航器的配置选项,详见下方轨迹巡航器部分。
    clearPathNavigators()销毁现存的所有轨迹巡航器

    事件

    事件名称参数说明
    startevent:{type:String} 事件调用start时触发
    pauseevent:{type:String} 事件调用pause时触发
    moveevent:{type:String} 事件调用moveByDistance(动画过程会调用该方法), moveToPoint 时触发
    stopevent:{type:String} 事件调用stop时触发
    展开全文
  • 本资源是练习连接高德API的操作,学习如何显示高德API地图,以及进行标点Marker,并有点击功能,进行跳转,界面用ListView显示。
  • 如何使用高德地图 API 做一个路线规划应用,展示自定义路线 喜欢骑车转,知道一些比较好的路线,想要分享给别人的时候不知道该怎么分享,有自定义路线的功能就好了。前不久高德推出了手机端的自定义路线功能。 其实 ...

    如何使用高德地图 API 做一个路线规划应用,展示自定义路线

    喜欢骑车转,知道一些比较好的路线,想要分享给别人的时候不知道该怎么分享,有自定义路线的功能就好了。前不久高德推出了手机端的自定义路线功能。

    其实 web API 可以实现很具体的路线规则,使用 Amap.DragRoute

    看例子:

    路线推荐: 金刚纂路 https://kylebing.cn/tools/map/#/route/1

    在这里插入图片描述

    官方 DragRoute 的说明

    关于路线规则的说明,官方如下,我们主要使用其中的 途经点 功能

    https://lbs.amap.com/api/jsapi-v2/guide/services/navigation

    1、途经点坐标

    首先需要有途经点的坐标数组,这里可以使用我做的这个工具来获取,官方的那个很不方便。

    https://kylebing.cn/tools/map/#/tool/route
    在这里插入图片描述

    2、需要在代码中引入 DragRoute 插件

    所有的功能都是以插件的形式引入的,像比例尺、缩放按钮什么的。看官方文档,有绍介说如何引入插件

    3、生成路径

    let route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE, {})
    // map 生成的地图对象
    // path 就是路径点数组
    // AMap.DrivingPolicy 就是路经生成的规则,驾车规则。就近还是就最省钱,还是步行少什么的
    

    驾车规则具体:https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy

    官方的说明如下:

    在这里插入图片描述

    4、获取路径的信息

    这个在官方没有说明,就是路线规则好之后,关于路线的一些信息,如驾车时间,路线距离等。
    这个需要监听上面生成的途经点路线的事件

    route.on('complete', res => {
        // 路线规划完成后,返回的路线数据:设置距离、行驶时间
        let lineData = res.data.routes[0] // 路线数据
        let distance =  (lineData.distance / 1000).toFixed(1) // m -> km  距离 
        let time = (lineData.time / 60).toFixed() // second -> min  用时
    })
    

    所有的例子都在我那个页面中

    地图工具 https://kylebing.cn/tools/map

    展开全文
  • 主要介绍了在vue中高德地图引入和轨迹的绘制的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Android 高德地图路线规划绘制界面线路 下面代码是根据很多的经纬度的点,绘制出直线的线路。比较死板 /** * 绘制景区的路线 */ private void setRouteInfo(List<ScenicSpotGuideBean.ScenicLineListBean....

    Android 高德地图中路线规划绘制界面线路

    下面代码是根据很多的经纬度的点,绘制出直线的线路。比较死板

        /**
         * 绘制景区的路线
         */
        private void setRouteInfo(List<ScenicSpotGuideBean.ScenicLineListBean.CoordinateListBean> data) {
            List<LatLng> list = listToLatLng(data);
            mAllLinePolyline = mAmap.addPolyline((new PolylineOptions())
                    //集合数据
                    .addAll(list)
                    //线的宽度
                    .width(20)
                    .setDottedLine(false) // 关闭虚线
                    .geodesic(true)
                    //颜色
                    .color(Color.argb(255, 36, 164, 255)));
        }
    

    大概效果是这样的 ,是一个点到另一个点之间的直线绘制。
    在这里插入图片描述
    因为这个比较死板,在线路中绘制这个比较不好,然后就有了另一种绘制,就是线路的绘制。
    先上效果图吧
    在这里插入图片描述
    因为界面要有这样的想过,所以直线绘制就不考虑了。
    我这边大概就是根据高德地图中的线路搜索,搜索类型是数据驾车。进行异步搜索并且绘制。就可以出这样的效果。

    	// 创建线路搜索对象
        RouteSearch mRouteSearch = null;
    	// 对象进行初始化
        mRouteSearch = new RouteSearch(this);
        // 搜索监听
       	mRouteSearch.setRouteSearchListener(mRouteSearchListener);
    

    由于我这边是绘制多条线路,我这边是这样做的。

    private void SurfacePolyDaysLine() {
            // 清除界面上之前绘制的线路
            clearAllLineMarker();
            // 所有线路需要将开始的线路经纬度放到这个集合中
            List<LatLng> list = new ArrayList<>();
            for (int j = 0; j < list.size() - 1; j++) { // 遍历当前集合进行搜索线路
           		// 传入当前线路的起点和终点坐标,然后进行绘制
                searchRouteResult(new LatLonPoint(list.get(j).latitude, list.get(j).longitude), new LatLonPoint(list.get(j + 1).latitude, list.get(j + 1).longitude));
            }
            // update map zoom
            setMapBounds(list);
        }
    

    下面是搜索线路代码

        /**
         * start search line
         */
        public void searchRouteResult(LatLonPoint mStartPoint, LatLonPoint mEndPoint) {
        	// 传入起点坐标、终点坐标
            final RouteSearch.FromAndTo fromAndTo = new RouteSearch.FromAndTo(mStartPoint, mEndPoint);
            // DriveRouteQuery 类型是驾车的路线搜索  DRIVING_SINGLE_SHORTEST 类型表示返回单个路线最短的数据集
            RouteSearch.DriveRouteQuery query = new RouteSearch.DriveRouteQuery(fromAndTo, RouteSearch.DRIVING_SINGLE_SHORTEST, null, null, "");
            // 开始异步搜索处理
            mRouteSearch.calculateDriveRouteAsyn(query);
        }
    

    搜索监听事件 ,将监听到的线路进行绘制在界面上就可以了。

    	/**
         * search line listener
         */
        RouteSearch.OnRouteSearchListener mRouteSearchListener = new RouteSearch.OnRouteSearchListener() {
            @Override
            public void onBusRouteSearched(BusRouteResult busRouteResult, int i) {
                // bus
            }
    
            @Override
            public void onDriveRouteSearched(DriveRouteResult result, int errorCode) {
                // driving
                if (errorCode == AMapException.CODE_AMAP_SUCCESS) {
                    if (result != null && result.getPaths() != null) {
                        if (result.getPaths().size() > 0) {
                            DriveRouteResult mDriveRouteResult = result;
                            final DrivePath drivePath = mDriveRouteResult.getPaths().get(0);
                            if (drivePath == null) { // 表示返回的线路是空的情况,就不管
                                return;
                            }
                            // 自定义的一个绘制处理
                            SharedHomeDrivingRouteOverlay drivingRouteOverlay = new SharedHomeDrivingRouteOverlay(
                                    SharedNavigationMapActivity.this, mAmap, drivePath,
                                    mDriveRouteResult.getStartPos(),
                                    mDriveRouteResult.getTargetPos(), null);
                            drivingRouteOverlay.setNodeIconVisibility(false); // 是否显示节点图标,这个里面没有设置所以没有,也不需要显示
                            drivingRouteOverlay.setIsColorfulline(false); // 是否显示线路的交通状态
                            drivingRouteOverlay.removeFromMap(); // 先进行移除掉
                            drivingRouteOverlay.addToMap(); // 添加到地图上面
    //                        drivingRouteOverlay.zoomToSpan(); // 根据线路的起点和终点自动缩放zoom值,显示在屏幕的中间
                        } else if (result != null && result.getPaths() == null) {
                        }
                    } else {
                    }
                } else {
                }
            }
    
            @Override
            public void onWalkRouteSearched(WalkRouteResult walkRouteResult, int i) {
                // walk
            }
    
            @Override
            public void onRideRouteSearched(RideRouteResult rideRouteResult, int i) {
                // ride
            }
        };
    

    自定义绘制线路界面,是根据高德地图《3D地图示例》中的出行路线规划中的驾车路径规划更改所得的,如果想要了解更多可以去参考这个demo文件的代码。

    
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Color;
    
    import com.amap.api.maps.AMap;
    import com.amap.api.maps.model.BitmapDescriptor;
    import com.amap.api.maps.model.BitmapDescriptorFactory;
    import com.amap.api.maps.model.LatLng;
    import com.amap.api.maps.model.LatLngBounds;
    import com.amap.api.maps.model.Marker;
    import com.amap.api.maps.model.MarkerOptions;
    import com.amap.api.maps.model.PolylineOptions;
    import com.amap.api.services.core.LatLonPoint;
    import com.amap.api.services.route.DrivePath;
    import com.amap.api.services.route.DriveStep;
    import com.amap.api.services.route.TMC;
    import cn.xmzt.www.R;
    
    import java.util.ArrayList;
    import java.util.List;
    
    
    /**
     * 导航路线图层类。
     */
    public class SharedHomeDrivingRouteOverlay extends RouteOverlay{
    
    	private DrivePath drivePath;
        private List<LatLonPoint> throughPointList;
        private List<Marker> throughPointMarkerList = new ArrayList<Marker>();
        private boolean throughPointMarkerVisible = true;
        private List<TMC> tmcs;
        private PolylineOptions mPolylineOptions;
        private PolylineOptions mPolylineOptionscolor;
        private Context mContext;
        private boolean isColorfulline = true;
        private float mWidth = 90;
        private List<LatLng> mLatLngsOfPath;
    
    	public void setIsColorfulline(boolean iscolorfulline) {
    		this.isColorfulline = iscolorfulline;
    	}
    
    	/**
         * 根据给定的参数,构造一个导航路线图层类对象。
         *
         * @param amap      地图对象。
         * @param path 导航路线规划方案。
         * @param context   当前的activity对象。
         */
        public SharedHomeDrivingRouteOverlay(Context context, AMap amap, DrivePath path,
                                             LatLonPoint start, LatLonPoint end, List<LatLonPoint> throughPointList) {
        	super(context);
        	mContext = context; 
            mAMap = amap; 
            this.drivePath = path;
            startPoint = AMapUtil.convertToLatLng(start);
            endPoint = AMapUtil.convertToLatLng(end);
            this.throughPointList = throughPointList;
        }
    
        public float getRouteWidth() {
            return mWidth;
        }
    
        /**
         * 设置路线宽度
         *
         * @param mWidth 路线宽度,取值范围:大于0
         */
        public void setRouteWidth(float mWidth) {
            this.mWidth = mWidth;
        }
    
        /**
         * 添加驾车路线添加到地图上显示。
         */
    	public void addToMap() {
    		initPolylineOptions();
            try {
                if (mAMap == null) {
                    return;
                }
    
                if (mWidth == 0 || drivePath == null) {
                    return;
                }
                mLatLngsOfPath = new ArrayList<LatLng>();
                tmcs = new ArrayList<TMC>();
                List<DriveStep> drivePaths = drivePath.getSteps();
                for (DriveStep step : drivePaths) {
                    List<LatLonPoint> latlonPoints = step.getPolyline();
                    List<TMC> tmclist = step.getTMCs();
                    tmcs.addAll(tmclist);
                    addDrivingStationMarkers(step, convertToLatLng(latlonPoints.get(0)));
                    for (LatLonPoint latlonpoint : latlonPoints) {
                    	mPolylineOptions.add(convertToLatLng(latlonpoint));
                    	mLatLngsOfPath.add(convertToLatLng(latlonpoint));
    				}
                }
                if (startMarker != null) {
                    startMarker.remove();
                    startMarker = null;
                }
                if (endMarker != null) {
                    endMarker.remove();
                    endMarker = null;
                }
                addThroughPointMarker();
                if (isColorfulline && tmcs.size()>0 ) {
    //            	colorWayUpdate(tmcs);
                	colorWayUpdates(tmcs);
                	showcolorPolyline();
    			}else {
    				showPolyline();
    			}            
                
            } catch (Throwable e) {
            	e.printStackTrace();
            }
        }
    
    	/**
         * 初始化线段属性
         */
        private void initPolylineOptions() {
            mPolylineOptions = null;
            mPolylineOptions = new PolylineOptions();
            mPolylineOptions.color(getDriveColor()).width(getRouteWidth());
            Bitmap bitmap = (Bitmap) BitmapFactory.decodeResource(mContext.getResources(),R.drawable.map_line_info_green);
            mPolylineOptions.setCustomTexture(BitmapDescriptorFactory.fromBitmap(bitmap));// TODO 如果要添加图片的话 需要将setIsColorfulline 设置为true才会显示
            mPolylineOptions.width(getRouteWidth());
            mPolylineOptions.setUseTexture(true);
        }
    
        private void showPolyline() {
            addPolyLine(mPolylineOptions);
        }
        
        private void showcolorPolyline() {
        	addPolyLine(mPolylineOptionscolor);
    	}
    
        /**
         * 根据不同的路段拥堵情况展示不同的颜色
         *
         * @param tmcSection
         */
        private void colorWayUpdate(List<TMC> tmcSection) {
            if (mAMap == null) {
                return;
            }
            if (tmcSection == null || tmcSection.size() <= 0) {
                return;
            }
            TMC segmentTrafficStatus;
            mPolylineOptionscolor = null;
            mPolylineOptionscolor = new PolylineOptions();
            Bitmap bitmap = (Bitmap) BitmapFactory.decodeResource(mContext.getResources(),R.drawable.map_line_info_green);
            mPolylineOptionscolor.setCustomTexture(BitmapDescriptorFactory.fromBitmap(bitmap));// TODO 如果要添加图片的话 需要将setIsColorfulline 设置为true才会显示
            mPolylineOptionscolor.width(getRouteWidth());
            mPolylineOptionscolor.setUseTexture(true);
            List<Integer> colorList = new ArrayList<Integer>();
            mPolylineOptionscolor.add(AMapUtil.convertToLatLng(tmcSection.get(0).getPolyline().get(0)));
            colorList.add(getDriveColor());
            for (int i = 0; i < tmcSection.size(); i++) {
            	segmentTrafficStatus = tmcSection.get(i);
            	int color = getcolor(segmentTrafficStatus.getStatus());
            	List<LatLonPoint> mployline = segmentTrafficStatus.getPolyline();
    			for (int j = 1; j < mployline.size(); j++) {
    				mPolylineOptionscolor.add(AMapUtil.convertToLatLng(mployline.get(j)));
    				colorList.add(color);
    			}
    		}
            colorList.add(getDriveColor());
            mPolylineOptionscolor.colorValues(colorList);
        }
    
        /**
         * 根据不同的路段拥堵情况展示不同的颜色的图片
         *
         * @param tmcSection
         */
        private void colorWayUpdates(List<TMC> tmcSection) {
            if (mAMap == null) {
                return;
            }
            if (tmcSection == null || tmcSection.size() <= 0) {
                return;
            }
            TMC segmentTrafficStatus;
            mPolylineOptionscolor = null;
            mPolylineOptionscolor = new PolylineOptions();
    //        Bitmap bitmap = (Bitmap) BitmapFactory.decodeResource(mContext.getResources(),R.drawable.custtexture_green);
    //        mPolylineOptionscolor.setCustomTexture(BitmapDescriptorFactory.fromBitmap(bitmap));// TODO 如果要添加图片的话 需要将setIsColorfulline 设置为true才会显示
    //        mPolylineOptionscolor.width(getRouteWidth());
    //        mPolylineOptionscolor.setUseTexture(true);
            List<Integer> colorList = new ArrayList<Integer>();
            List<BitmapDescriptor> list = new ArrayList<>();
            int position = 0;
            mPolylineOptionscolor.add(AMapUtil.convertToLatLng(tmcSection.get(0).getPolyline().get(0)));
            list.add(BitmapDescriptorFactory.fromResource(getDriveColorRes()));
            colorList.add(position);
            position += 1;
            for (int i = 0; i < tmcSection.size(); i++) {
            	segmentTrafficStatus = tmcSection.get(i);
            	int colorres = getcolorRes(segmentTrafficStatus.getStatus());
            	List<LatLonPoint> mployline = segmentTrafficStatus.getPolyline();
    			for (int j = 1; j < mployline.size(); j++) {
    				mPolylineOptionscolor.add(AMapUtil.convertToLatLng(mployline.get(j)));
                    list.add(BitmapDescriptorFactory.fromResource(colorres));
                    colorList.add(position);
                    position += 1;
    			}
    		}
            list.add(BitmapDescriptorFactory.fromResource(getDriveColorRes()));
            colorList.add(position);
            mPolylineOptionscolor.setCustomTextureList(list);
            mPolylineOptionscolor.setCustomTextureIndex(colorList);
            mPolylineOptionscolor.width(getRouteWidth());
            mPolylineOptionscolor.setUseTexture(true);
        }
    
        private int getcolor(String status) {
        	if (status.equals("畅通")) { // 畅通情况下 绿色显示
        		return Color.parseColor("#11BA1F");
    		} else if (status.equals("缓行")) { // 缓行情况下 黄色显示
    			 return Color.parseColor("#FFAD37");
    		} else if (status.equals("拥堵")) { // 拥堵情况下 红色显示
    			return Color.parseColor("#F41A25");
    		} else if (status.equals("严重拥堵")) { // 严重拥堵 猪肝红显示
    			return Color.parseColor("#AB1717");
    		} else { // 未知情况下蓝色显示
    			return Color.parseColor("#1590FF");
    		}	
    	}
    
        private int getcolorRes(String status) {
        	if (status.equals("畅通")) { // 畅通情况下 绿色显示
        		return R.drawable.map_line_info_green;
    		} else if (status.equals("缓行")) { // 缓行情况下 黄色显示
    			 return R.drawable.map_line_info_yellow;
    		} else if (status.equals("拥堵")) { // 拥堵情况下 红色显示
    			return R.drawable.map_line_info_red;
    		} else if (status.equals("严重拥堵")) {  // 严重拥堵 猪肝红显示
    			return R.drawable.map_line_info_red_more;
    		} else { // 未知情况下蓝色显示
    			return R.drawable.map_line_no_info_blue;
    		}
    	}
    
    
        protected int getDriveColorRes() { // 畅通情况下 绿色显示 TODO 可能会换成蓝色
            return R.drawable.map_line_info_green;
        }
    	public LatLng convertToLatLng(LatLonPoint point) {
            return new LatLng(point.getLatitude(),point.getLongitude());
      }
        
        /**
         * @param driveStep
         * @param latLng
         */
        private void addDrivingStationMarkers(DriveStep driveStep, LatLng latLng) {
            addStationMarker(new MarkerOptions()
                    .position(latLng)
                    .title("\u65B9\u5411:" + driveStep.getAction()
                            + "\n\u9053\u8DEF:" + driveStep.getRoad())
                    .snippet(driveStep.getInstruction()).visible(nodeIconVisible)
                    .anchor(0.5f, 0.5f).icon(getDriveBitmapDescriptor()));
        }
    
        @Override
        protected LatLngBounds getLatLngBounds() {
            LatLngBounds.Builder b = LatLngBounds.builder();
            b.include(new LatLng(startPoint.latitude, startPoint.longitude));
            b.include(new LatLng(endPoint.latitude, endPoint.longitude));
            if (this.throughPointList != null && this.throughPointList.size() > 0) {
                for (int i = 0; i < this.throughPointList.size(); i++) {
                    b.include(new LatLng(
                            this.throughPointList.get(i).getLatitude(),
                            this.throughPointList.get(i).getLongitude()));
                }
            }
            return b.build();
        }
    
        public void setThroughPointIconVisibility(boolean visible) {
            try {
                throughPointMarkerVisible = visible;
                if (this.throughPointMarkerList != null
                        && this.throughPointMarkerList.size() > 0) {
                    for (int i = 0; i < this.throughPointMarkerList.size(); i++) {
                        this.throughPointMarkerList.get(i).setVisible(visible);
                    }
                }
            } catch (Throwable e) {
                e.printStackTrace();
            }
        }
        
        private void addThroughPointMarker() {
            if (this.throughPointList != null && this.throughPointList.size() > 0) {
                LatLonPoint latLonPoint = null;
                for (int i = 0; i < this.throughPointList.size(); i++) {
                    latLonPoint = this.throughPointList.get(i);
                    if (latLonPoint != null) {
                        throughPointMarkerList.add(mAMap
                                .addMarker((new MarkerOptions())
                                        .position(
                                                new LatLng(latLonPoint
                                                        .getLatitude(), latLonPoint
                                                        .getLongitude()))
                                        .visible(throughPointMarkerVisible)
                                        .icon(getThroughPointBitDes())
                                        .title("\u9014\u7ECF\u70B9")));
                    }
                }
            }
        }
        
        private BitmapDescriptor getThroughPointBitDes() {
        	return BitmapDescriptorFactory.fromResource(R.drawable.amap_through);
           
        }
    
        /**
         * 获取两点间距离
         *
         * @param start
         * @param end
         * @return
         */
        public static int calculateDistance(LatLng start, LatLng end) {
            double x1 = start.longitude;
            double y1 = start.latitude;
            double x2 = end.longitude;
            double y2 = end.latitude;
            return calculateDistance(x1, y1, x2, y2);
        }
    
        public static int calculateDistance(double x1, double y1, double x2, double y2) {
            final double NF_pi = 0.01745329251994329; // 弧度 PI/180
            x1 *= NF_pi;
            y1 *= NF_pi;
            x2 *= NF_pi;
            y2 *= NF_pi;
            double sinx1 = Math.sin(x1);
            double siny1 = Math.sin(y1);
            double cosx1 = Math.cos(x1);
            double cosy1 = Math.cos(y1);
            double sinx2 = Math.sin(x2);
            double siny2 = Math.sin(y2);
            double cosx2 = Math.cos(x2);
            double cosy2 = Math.cos(y2);
            double[] v1 = new double[3];
            v1[0] = cosy1 * cosx1 - cosy2 * cosx2;
            v1[1] = cosy1 * sinx1 - cosy2 * sinx2;
            v1[2] = siny1 - siny2;
            double dist = Math.sqrt(v1[0] * v1[0] + v1[1] * v1[1] + v1[2] * v1[2]);
    
            return (int) (Math.asin(dist / 2) * 12742001.5798544);
        }
    
    
        //获取指定两点之间固定距离点
        public static LatLng getPointForDis(LatLng sPt, LatLng ePt, double dis) {
            double lSegLength = calculateDistance(sPt, ePt);
            double preResult = dis / lSegLength;
            return new LatLng((ePt.latitude - sPt.latitude) * preResult + sPt.latitude, (ePt.longitude - sPt.longitude) * preResult + sPt.longitude);
        }
        /**
         * 去掉DriveLineOverlay上的线段和标记。
         */
        @Override
        public void removeFromMap() {
            try {
                super.removeFromMap();
                if (this.throughPointMarkerList != null
                        && this.throughPointMarkerList.size() > 0) {
                    for (int i = 0; i < this.throughPointMarkerList.size(); i++) {
                        this.throughPointMarkerList.get(i).remove();
                    }
                    this.throughPointMarkerList.clear();
                }
            } catch (Throwable e) {
                e.printStackTrace();
            }
        }
    }
    

    高德地图小知识,共勉

    展开全文
  • 由于vue-amap不支持路线规划,因此不予采纳。 在index.html的header中引入 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e72a9f0cac3b081df05259299454cf1a"></...

    由于vue-amap不支持路线规划,因此不予采纳。
    效果如图
    在这里插入图片描述

    1. 在index.html的header中引入
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e72a9f0cac3b081df05259299454cf1a"></script>
      <!--引入UI组件库(1.0版本) -->
    <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    
    1. 配置webpack
      build\webpack.base.conf.js 中,找到module.exports, 添加如下代码,记得重启项目!!!!
    externals: {
        AMap: 'AMap',
        AMapUI: 'AMapUI'
    },
    

    在这里插入图片描述

    1. 绘制地图并规划路线(关键代码)

    用来放地图

    <div class="page" id="map-container"></div>
    

    用来放路线规划

    <div id="panel"></div>
    

    初始化

    this.map = new AMap.Map("map-container", {
          resizeEnable: true,
          center: [108.9470386505, 34.2593889736], // 地图中心点
          zoom: 16, // 地图显示的缩放级别
    });
    

    公交路线查询

    new AMap.Transfer({
            map: this.map,
            panel: "panel",
          }).search(
            [
              { keyword: "宁波大学", city: "宁波" },
              { keyword: "宁波老外滩", city: "宁波" },
            ],
            function (status, data) {
              console.log(data);
            }
          );
    
    1. 完整代码(精简版)
    <template>
      <div class="map-content">
        <div class="page" id="map-container"></div>
        <div id="panel"></div>
      </div>
    </template>
    <script>
    import AMap from "AMap";
    import AMapUI from "AMapUI";
    export default {
      name: "Amap",
    
      data() {
        return {
          map: null,
        };
      },
      mounted() {
        // 地图初始化
        this.map = new AMap.Map("map-container", {
          resizeEnable: true,
          center: [108.9470386505, 34.2593889736], // 地图中心点
          zoom: 16, // 地图显示的缩放级别
        });
        // 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺
        // 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)
        // 公交站点查询
        AMap.plugin(
          [
            "AMap.ToolBar",
            "AMap.Scale",
            "AMap.Transfer",
            "AMap.Geolocation",
            "AMap.StationSearch",
          ],
          () => {
            this.map.addControl(new AMap.ToolBar());
            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.Transfer());
            this.map.addControl(new AMap.Geolocation());
            this.map.addControl(new AMap.StationSearch());
          }
        );
        this.getRoute(); // 获取线路规划
      },
      methods: {
        // 1.路线规划,不乘坐地铁2.自行车出行(暂时不做)3.最快捷模式(综合出行[包含地铁]),用1,2,3来区分出行方式(goMethod)
        // 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
        getRoute() {
          new AMap.Transfer({
            map: this.map,
            panel: "panel",
          }).search(
            [
              { keyword: "宁波大学", city: "宁波" },
              { keyword: "宁波老外滩", city: "宁波" },
            ],
            function (status, data) {
              console.log(data);
            }
          );
        },
      },
    };
    </script>
    <style  scoped>
    .page {
      height: calc(100vh - 50px);
    }
    .map-content {
      position: relative;
    }
    #panel {
      position: absolute;
      top: 0;
      right: 0;
    }
    </style>
    
    1. 完整代码(定位、公交站点搜索、路线规划)
    
    <template>
      <div class="map-content">
        <div class="page" id="map-container"></div>
        <div id="routeInfo"></div>
      </div>
    </template>
    <script>
    import AMap from "AMap";
    import AMapUI from "AMapUI";
    export default {
      name: "Amap",
      components: { AMap, AMapUI },
      data() {
        return {
          map: null,
          transOptions: {},
          routeListData: [],
          stationListData: [],
        };
      },
      props: {
        sartAndEnd: Array, // 线路导乘起终点经纬度
      },
      mounted() {
        // 地图初始化
        this.map = new AMap.Map("map-container", {
          resizeEnable: true,
          center: [108.9470386505, 34.2593889736], // 地图中心点
          zoom: 16, // 地图显示的缩放级别
        });
        // 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺
        // 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)
        // 公交站点查询
        AMap.plugin(
          [
            "AMap.ToolBar",
            "AMap.Scale",
            "AMap.Transfer",
            "AMap.Geolocation",
            "AMap.StationSearch",
          ],
          () => {
            this.map.addControl(new AMap.ToolBar());
            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.Transfer());
            this.map.addControl(new AMap.Geolocation());
            this.map.addControl(new AMap.StationSearch());
          }
        );
        this.getRoute(); // 获取线路规划
        this.getLocation(); // 获取我的位置
        this.getBusStation(); // 站点查询
      },
      methods: {
        // 1.路线规划,不乘坐地铁2.自行车出行(暂时不做)3.最快捷模式(综合出行[包含地铁]),用1,2,3来区分出行方式(goMethod)
        // 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
        getRoute(params) {
          params = 1;
          if (params === 1) {
            // map:AMap.Map对象, 展现结果的地图实例 panel:结果列表的HTML容器id或容器元素 nightflag:是否计算夜班车 policy:公交换乘策略
            this.transOptions = {
              map: this.map,
              city: "西安",
              panel: "routeInfo",
              nightflag: true,
              policy: AMap.TransferPolicy.NO_SUBWAY,
            };
          } else if (params === 2) {
            this.transOptions = {
              map: this.map,
              city: "西安",
              panel: "routeInfo",
              nightflag: true,
              policy: AMap.TransferPolicy.NO_SUBWAY,
            };
          } else if (params === 3) {
            this.transOptions = {
              map: this.map,
              city: "西安",
              panel: "routeInfo",
              nightflag: true,
              policy: AMap.TransferPolicy.LEAST_TIME,
            };
          }
          // 构造公交换乘类
          var transfer = new AMap.Transfer(this.transOptions);
          // 一:
          // 根据起、终点坐标查询公交换乘路线,使用父组件传入的起终点经纬度
          // transfer.search(new AMap.LngLat(108.9342500000, 34.2305300000), new AMap.LngLat(108.9470386505, 34.2593889736), function (status, result) {
          //   // result即是对应的公交路线数据信息
          //   if (status === 'complete') {
          //     // 出行计划按照时间顺序排序
          //     const route = result.plans.sort(function (a, b) { return a.time - b.time })
          //     this.routeListData = route
          //     console.log(this.routeListData)
          //     // console.log(this.routeListData)
          //   } else {
          //     console.log('公交路线数据查询失败' + result)
          //   }
          // })
    
          // 二:
          // 根据起、终点坐标查询公交换乘路线,使用父组件传入的起终点经纬度
          transfer.search(
            new AMap.LngLat(108.93425, 34.23053),
            new AMap.LngLat(108.9470386505, 34.2593889736)
          );
          AMap.event.addListener(transfer, "complete", (res) => {
            // res即是对应的公交路线数据信息
            // res为获取到的当前位置的信息
            console.log(res);
            // 出行计划按照时间顺序排序
            const route = res.plans.sort(function (a, b) {
              return a.time - b.time;
            });
            this.routeListData = route;
            console.log(this.routeListData);
          }); // 返回出行方式信息
          AMap.event.addListener(transfer, "error", (err) => {
            console.log(err);
          }); // 返回出行方式信息出错信息
        },
        // 获取当前位置
        getLocation() {
          // 定义定位获取当前位置
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位,默认:true
            timeout: 100000, // 超过100秒后停止定位,默认:无穷大
            maximumAge: 0, // 定位结果缓存0毫秒,默认:0
            convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true
            showButton: false, // 显示定位按钮,默认:true
            // buttonPosition: 'LB',    //定位按钮停靠位置,默认:'LB',左下角
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
            showMarker: false, // 定位成功后在定位到的位置显示点标记,默认:true
            showCircle: false, // 定位成功后用圆圈表示定位精度范围,默认:true
            panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:true
            zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
          });
          // 一定要add添加
          // this.map.addControl(geolocation)
          geolocation.getCurrentPosition(); // 获取用户当前的精确位置信息当回调函数中的status为complete的时候表示定位成功
          AMap.event.addListener(geolocation, "complete", (res) => {
            // res为获取到的当前位置的信息
            console.log(res);
          }); // 返回定位信息
          AMap.event.addListener(geolocation, "error", (err) => {
            console.log(err);
          }); // 返回定位出错信息
        },
        // 获取站点信息列表,使用父组件传入输入框的值
        getBusStation() {
          this.stationSearch = {
            pageIndex: 1, // 页码
            pageSize: 30, // 单页显示结果条数
            city: "029", // 确定搜索城市
          };
          var stationList = new AMap.StationSearch(this.stationSearch);
          // 一:
          // stationList.search('小', function (status, result) {
          //   // result即是对应的公交站点数据信息
          //   if (status === 'complete' && result.info === 'OK') {
          //     console.log(result)
          //     console.log(this.stationListData)
          //   } else {
          //     console.log('公交路线数据查询失败' + result)
          //   }
          // })
          // 二:
          stationList.search("西安钟楼"); // mock一个假数据
          AMap.event.addListener(stationList, "complete", (res) => {
            // res为获取到的当前位置的信息
            this.stationListData = res;
            console.log(this.stationListData);
          }); // 返回定位信息
          AMap.event.addListener(stationList, "error", (err) => {
            console.log(err);
          }); // 返回定位出错信息
        },
      },
    };
    </script>
    <style  scoped>
    .page {
      height: calc(100vh - 50px);
    }
    .map-content {
      position: relative;
    }
    #routeInfo {
      position: absolute;
      top: 0;
      right: 0;
    }
    </style>
    
    
    展开全文
  • Android 高德地图 步行 路线规划

    千次阅读 2017-11-04 17:26:37
    路线规划就是给RouteSearch设置一个监听,里面有步行规划,骑车,驾车,公交等线路的规划第 1 步,初始化 RouteSearch 对象routeSearch = new RouteSearch(this);第 2 步,设置数据回调监听器routeSearch....
  • 主要介绍了vue中使用高德地图搭建实时公交应用(地图 + 附近站点+线路详情 + 输入提示+换乘详情),主要是让大家熟悉下高德地图在vue中的使用及vue的常用指令,需要的朋友可以参考下
  • 一、设置初始值,绘制矢量图形 二、绘制路径 三、批量标记点 四、路线设置 五、打开信息窗体
  • (六)高德地图之驾车路线规划

    千次阅读 热门讨论 2018-11-26 12:49:52
    在项目中用到地图的地方往往会有导航功能,那么这一节将介绍一下使用高德地图来实现驾车路线规划的功能。 首先来两张示例图供参考: 接下来还是直接上代码更直观 建立DriverRouteActivity.java主程序类 ...
  • // 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺 // 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位) // 公交站点查询 A...
  • 导航(判断手机是否安装了百度和高德地图) 跳转百度地图 展示路线 主要代码: package com.hj.locationtest; import android.app.ProgressDialog; import android.content.Context; import ...
  • //获取地图控件引用 map(savedInstanceState); landian(); LatLng latLng = new LatLng(39.92579, 116.453513); final Marker marker = aMap.addMarker(new MarkerOptions().position(latLng).title("北京").
  • 因为只要纯展示,所以数据都是写的假数据。调接口的应该也不难,但是要按实际返回的接口看怎么处理、 首先有个容器装地图,给个具体的高度。 <template> <div style="position: relative;height: 580px;...
  • 经过这段时间的使用和研究,我发现点和点之间的最短路线并不是最优的。针对所有点的组合可能, 得到的最短路线才是最好的(也就是TSP方法),然后再结合点对点之间的距离进行比较,得到的才是相对最优方案。 举例...
  • 先扔一些高德原有UI的更改占坑. //更改系统原有定位图标 MyLocationStyle myLocationStyle = new MyLocationStyle(); myLocationStyle.myLocationIcon(BitmapDescriptorFactory .fromResource(R.drawable.gps_...
  • 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1、在index.html里面引入高德地图js文件 2、引入之后我们就直接可以在vue组件里面使用了 创建initMap方法,在mounted钩子函数中调用 ...
  • 高德用的汽车路线规划,动画回放的功能,路线颜色改不了,粗细也改不了,所以会很丑。甲方爸爸很生气,后果很严重!!! 先来欣赏一下改之前的长什么样 然后改之后看看: 是不是好看很多!!! 只贴部分...
  • 高德地图-实时导航,路径轨迹显示

    热门讨论 2016-04-01 11:19:58
    选择起点和终点后点击直接路径导航就会将导航路径及语音播报在地图上显示,由于是实时导航,过在未移动的情况下,移动车辆标记的为显示;代码中对网络及GPS是否连接都做了判断,起点是定位点的位置,终点则自己点击...
  • 高德地图路线规划

    千次阅读 2017-05-07 20:52:34
    在上一篇文章中,我们讲到了高德地图之拾取地点,今天接下来总结路线规划,整个实现的过程大致如下: 获取终点 规划路线 路线的选择与路线的绘制 路线结果的展示 首先来看看需要实现的效果:整个布局比较简单,...
  • 前段时间做要做个功能,判断手机是否装有百度,高德App,安装哪个弹出哪个,点击地图后跳转至App的驾车路线规划部分。 做这个功能其实本身不难,就是这其中需求各种改动,有些东西没处理好。 效果图: 过程:写...
  • 要的是图片上的效果,展示出多个规划的路线(就是知道出发点和终点自动生成一条路,而不是两点之间的连线)
  • 高德地图轨迹展示样式修改

    千次阅读 2019-12-05 15:34:41
    //所属的地图实例 getPath : function ( pathData , pathIndex ) { return pathData . path ; } , getHoverTitle : function ( pathData , pathIndex , pointIndex ) { if ( ...
  • 浏览器精确定位 展示效果: 作者: 赖导--
  • 在地图应用中,常见的应用之一应该就有查询两个地方的线路规划吧,高德地图提供了驾车路线规划、货车路线规划、公车换乘服务、步行导航服务、骑行路径规划服务等,这里我用的是驾车路线规划做一个列子。 驾车路线...
  • 高德地图JS--批量规划步行路线 优化

    千次阅读 2018-09-28 19:02:21
    调取高德地图JS API 进行步行路线规划 多个起点到达一个重点,根据搜素结果画路线,进行绘图,并为线路添加点击事件 效果如下: 代码如下: <!doctype html> <html> <head> <meta ...
  • vue使用高德地图做车辆轨迹展示

    千次阅读 2020-11-23 16:51:31
    使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save 2 在mai.js中引入 import AMap from 'vue-amap'; Vue.use(AMap); AMap.initAMapApiLoader({ key: "自己申请的key", ...
  • 文章目录申请接入流程显示高德地图显示定位Marker 显示地图标记Route 路线规划Search 搜索 申请接入流程 1、首先到 [ 高德地图API官网] 申请注册帐号 2、进入控制台,点击应用管理,我们创建一个新的应用: 3、为...
  • 基于高德地图SDK实现跑步路线踩点

    千次阅读 2018-08-12 17:06:04
      现在市面上有很多跑步的app,主要的功能大致是记录你的跑步路线以及你的跑步状况,速度距离等,大多是使用了高德地图,百度地图之类的SDK。   之前学校里有一款课外体育考勤的跑步APP,叫运动世界校园,应该...
  • 高德地图功能案例

    2021-04-06 01:43:01
    two:实现了高德地图的几种展示 ; three:通过地图中的经纬度和比例的系数来实现对地图的放大和缩小; four:实现对地图中的大头针的自定义; five:以动画的方式来返回到用户原来定位的位置; six:点击“航拍...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,310
精华内容 524
关键字:

高德地图如何展示路线