高德地图根绝经纬度画线跑步软件

原文地址:http://my.oschina.net/qzzsunly/blog/401754?p=1

随机生成点

目前使用的是随机生成的点来绘制拆线。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public  void  draw() {
         Random random =  new  Random( 100 );
         LatLng start=  new  LatLng( 30.47523 , 114.385532 );
         List<LatLng> points =  new  ArrayList<LatLng>();
         int  i =  0 ;
         while  (i++ <  100 ) {
             double  lat = random.nextDouble() *  0.1 ;
             double  lng = random.nextDouble() *  0.1 ;
             LatLng latLng =  new  LatLng(start.latitude+lat, start.longitude+lng);
             points.add(latLng);
         }
//        aMap.moveCamera(CameraUpdateFactory.newLatLng(points.get(points.size()-1)));
         Map map =  new  Map(aMap);
         TrackPathUtils.addPath(map,  new  ArrayList<Polyline>(), points, Color.RED,  false );
     }


调用工具类来画线

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
      * Add a path.
      *
      * @param map       the  map
      * @param paths     the existing paths
      * @param points    the path points
      * @param color     the path color
      * @param append    true to append to the last path
      */
     public  static  void  addPath(Map map, List<Polyline> paths,
                                List<LatLng> points,  int  color,  boolean  append) {
         if  (points.size() ==  0 ) {
             return ;
         }
         if  (append && paths.size() !=  0 ) {
             Polyline lastPolyline = paths.get(paths.size() -  1 );
             ArrayList<LatLng> pathPoints =  new  ArrayList<LatLng>();
             pathPoints.addAll(lastPolyline.getPoints());
             pathPoints.addAll(points);
             lastPolyline.setPoints(pathPoints);
         else  {
             AMap aMap = map.getAMap();
//            PolylineOptions polylineOptions = new PolylineOptions().add(new LatLng(43.828, 87.621), new LatLng(45.808, 126.55)).width(10).color(Color.RED);
             PolylineOptions polylineOptions =  new  PolylineOptions().addAll(points).width( 5 ).color(color);
             Polyline polyline = aMap.addPolyline(polylineOptions);
             paths.add(polyline);
         }
         points.clear();
     }

补图一张:

Vue是一种流行的JavaScript框架,用于构建用户界面。而高德地图是一种基于Web的地图服务,提供了丰富的地图展示和地理信息处理功能。在Vue中使用高德地图画线可以通过以下步骤实现: 1. 首先,在Vue项目中引入高德地图的JavaScript API。可以通过在HTML文件中添加`<script>`标签引入高德地图的API,或者使用npm安装相应的包。 2. 在Vue组件中创建一个地图容器,可以使用`<div>`标签来创建一个具有唯一ID的容器。 3. 在Vue组件的`mounted`生命周期钩子函数中初始化地图对象。可以使用`new AMap.Map()`来创建一个地图对象,并将其绑定到之前创建的容器上。 4. 使用高德地图提供的API来绘制线条。可以使用`AMap.Polyline`类来创建一个折线对象,并设置其路径、样式等属性。然后将折线对象添加到地图上,即可在地图上显示出线条。 下面是一个简单的示例代码: ```vue <template> <div id="mapContainer"></div> </template> <script> export default { mounted() { // 初始化地图对象 const map = new AMap.Map('mapContainer', { zoom: 13, center: [116.397428, 39.90923] }); // 创建折线对象 const polyline = new AMap.Polyline({ path: [ [116.368904, 39.913423], [116.382122, 39.901176], [116.387271, 39.912501], [116.398258, 39.904600] ], strokeColor: '#FF0000', strokeWeight: 6 }); // 将折线对象添加到地图上 map.add(polyline); } } </script> ``` 这样,当该Vue组件被渲染时,就会在地图容器中显示出一条红色的折线。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值