高德地图的画图表,加文字,画线,测距

 private void changeRider(Object data) {
        HashMap<String, String> hashMap = (HashMap<String, String>) data;

        String type = hashMap.get("type");

        String lat = hashMap.get(Constant.LAT);
        String lng = hashMap.get(Constant.LNG);

        //获取经纬度信息,定位骑手的位置
        LatLng currentPos=new LatLng(Double.valueOf(lat),Double.valueOf(lng));

        //将经纬度添加在经纬度集合中
        riderPosList.add(currentPos);
        //设置骑手的所在位置
        markerRider.setPosition(currentPos);
        //地图定位焦点
        aMap.moveCamera(CameraUpdateFactory.changeLatLng(currentPos));

        String info="";
        DecimalFormat format=new DecimalFormat(".00");

        switch (type) {
            case OrderObserver.ORDERTYPE_DISTRIBUTION_RIDER_TAKE_MEAL:
                // 取餐,距离卖家的距离
                float ds = AMapUtils.calculateLineDistance(currentPos, latlngSeller);
                info="距离商家"+format.format(ds)+"米";
                break;
            case OrderObserver.ORDERTYPE_DISTRIBUTION_RIDER_GIVE_MEAL:
                // 送餐,距离买家的距离
                float db = AMapUtils.calculateLineDistance(currentPos, latlngBuyer);
                info="距离买家"+format.format(db)+"米";
                break;
        }

        markerRider.setSnippet(info);
        markerRider.showInfoWindow();
        //参数一:当前所处位置
        //参数二:历史的点
        drawLine(currentPos,riderPosList.get(riderPosList.size()-2));
    }

    private void drawLine(LatLng currentPos, LatLng pos) {
        aMap.addPolyline(new PolylineOptions().add(pos,currentPos).width(2).color(Color.GREEN));
    }

    private void initRider(Object object) {
        riderPosList.clear();

        //显示骑手,屏幕上添加一张骑手图片
        LatLng riderlatLng =  new LatLng(doublelat, doublelng);
        //地图缩放级别   参数值越大,能看到的区域就越少,但是越详细
        aMap.moveCamera(CameraUpdateFactory.zoomTo(17));

        //创建一个在地图上需要显示的点的对象
        riderMarker = aMap.addMarker(new MarkerOptions().position(riderlatLng));
        //给要显示的点准备图片
        BitmapDescriptor descriptor = BitmapDescriptorFactory.fromBitmap(BitmapFactory
                .decodeResource(getResources(), R.drawable.order_rider_icon));
        //将图片添加在点上
        riderMarker.setIcon(descriptor);
        //骑手接单描述内容
        riderMarker.setSnippet("骑手已接单");
        //显示骑手
        riderMarker.showInfoWindow();

        //将骑手设置在地图的中心点
        aMap.moveCamera(CameraUpdateFactory.changeLatLng(riderlatLng));

        //添加骑手登场开始位置
        riderPosList.add(riderlatLng);
    }

    private void initMap() {
        map.setVisibility(View.VISIBLE);

        aMap.moveCamera(CameraUpdateFactory.zoomTo(13));

        // 添加买家marker
        latlngBuyer = new LatLng(40.100519, 116.365828);
        //指定地图的中心点为买家
        aMap.moveCamera(CameraUpdateFactory.changeLatLng(latlngBuyer));

        //创建一个在地图上需要显示的点的对象
        Marker marker = aMap.addMarker(new MarkerOptions().position(latlngBuyer));
        //给要显示的点准备图片
        BitmapDescriptor descriptor = BitmapDescriptorFactory.fromBitmap(BitmapFactory
                .decodeResource(getResources(), R.drawable.order_buyer_icon));
        //将图片添加在点上
        marker.setIcon(descriptor);

        // 添加卖家marker
        latlngSeller = new LatLng(40.060244, 116.343513);

        //创建一个在地图上需要显示的点的对象
        Marker marker1 = aMap.addMarker(new MarkerOptions().position(latlngSeller));
        //给要显示的点准备图片
        BitmapDescriptor descriptor1 = BitmapDescriptorFactory.fromBitmap(BitmapFactory
            .decodeResource(getResources(), R.drawable.order_seller_icon));
        //将图片添加在点上
        marker1.setIcon(descriptor1);
    }

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、付费专栏及课程。

余额充值