高德地圖繪製點，所有點實現InfoWindow（換種思路轉換）

公司業務員有個需求，需要實現下圖的效果：

乍一看這圖，挺複雜的，刨開分析，主要如下：
1繪製點（藍綠色的散點，線端的藍色空心點）
2.繪製線
3.信息框（紅色的排名信息，框中的時間及人物信息）

看上去簡單，實現起來還是碰到了一些坑的：
1.空心圓和線的位置對不上，看上去很彆扭
2.那些排序數字用InfoWindow實現時每次只能展示一個，必須尋求其它方法
3.右上角有個選擇人物，切換後需要切換點的信息，怎樣刷新?

這裏我使用的是高德地圖，集成那些就省略了，高德開發文檔寫的挺清楚的。集成後開始上邊的第一個步驟。

一：繪製點
繪製點挺簡單的，參照高德文檔繪製點標記
我的代碼：

 private List<Marker> markers = new ArrayList<>();
  //展示某一個數據軌跡
    private void showOneSalesmanTravel(BitmapDescriptor bitmap, LatLngBounds.Builder builder, List<TravelSalesman> list, List<TravelBranch> listBranch, String salesman) {
       markers.clear();
        List<LatLng> latLngs = new ArrayList<>();

        //拜訪門店
        int i = 0;
        BitmapDescriptor bitmapBranch = BitmapDescriptorFactory.fromResource(R.mipmap.red_point);
        for (TravelBranch travelBranch : listBranch) {
            i++;
            LatLng latLng = new LatLng(travelBranch.getXlocationLat(), travelBranch.getYlocationLng());
            MarkerOptions options = new MarkerOptions();
            options.anchor(0.5f, 0.5f).icon(bitmapBranch).position(latLng);
            MarkerOptions options1 = new MarkerOptions();
            if (i == listBranch.size()) {
                options1.anchor(0.5f, 1.1f).icon(BitmapDescriptorFactory.fromView(getInfoView("終", true, travelBranch, salesman))).position(latLng);
            } else {
                options1.anchor(0.5f, 1.1f).icon(BitmapDescriptorFactory.fromView(getInfoView("" + i, false, travelBranch, salesman))).position(latLng);
            }
            markers.add(aMap.addMarker(options));
            markers.add(aMap.addMarker(options1));

            builder.include(options.getPosition());
        }

        //軌跡
        for (TravelSalesman travelSalesman : list) {
            LatLng latLng = new LatLng(travelSalesman.getx(), travelSalesman.gety());
            latLngs.add(latLng);
            MarkerOptions options = new MarkerOptions();
            options.anchor(0.5f, 0.5f).icon(bitmap).position(latLng);
//            MarkerOptions options1 = new MarkerOptions();
//            options1.anchor(0.5f, 1.1f).icon(BitmapDescriptorFactory.fromView(getInfoView("" + 1))).position(latLng);

            //這個步驟將所有的點都展示在地圖上，自動縮放
            builder.include(options.getPosition());

            markers.add(aMap.addMarker(options));
//            markers.add(aMap.addMarker(options1));
        }

        Polyline polyline = aMap.addPolyline(new PolylineOptions().
                addAll(latLngs).width(5).color(getContext().getResources().getColor(R.color.yellow_color)));
        polylineList.add(polyline);

        cameraUpdate = CameraUpdateFactory.newLatLngBounds(builder.build(), 15);
        aMap.animateCamera(cameraUpdate);
    }

二、繪製線
繪製線也是隻要有多個座標點就可以繪製了

    private Map<String, List<TravelSalesman>> map = new HashMap<>();
    private List<Marker> markers = new ArrayList<>();
    private List<Polyline> polylineList = new ArrayList<>();
    private CameraUpdate cameraUpdate;
 //展示某一個數據軌跡
    private void showOneSalesmanTravel(BitmapDescriptor bitmap, LatLngBounds.Builder builder, List<TravelSalesman> list, List<TravelBranch> listBranch, String salesman) {
        List<LatLng> latLngs = new ArrayList<>();

        //拜訪門店
        int i = 0;
        BitmapDescriptor bitmapBranch = BitmapDescriptorFactory.fromResource(R.mipmap.red_point);
        for (TravelBranch travelBranch : listBranch) {
            i++;
            LatLng latLng = new LatLng(travelBranch.getXlocationLat(), travelBranch.getYlocationLng());
            MarkerOptions options = new MarkerOptions();
            options.anchor(0.5f, 0.5f).icon(bitmapBranch).position(latLng);
            MarkerOptions options1 = new MarkerOptions();
            if (i == listBranch.size()) {
                options1.anchor(0.5f, 1.1f).icon(BitmapDescriptorFactory.fromView(getInfoView("終", true, travelBranch, salesman))).position(latLng);
            } else {
                options1.anchor(0.5f, 1.1f).icon(BitmapDescriptorFactory.fromView(getInfoView("" + i, false, travelBranch, salesman))).position(latLng);
            }
            markers.add(aMap.addMarker(options));
            markers.add(aMap.addMarker(options1));

            builder.include(options.getPosition());
        }

        //軌跡
        for (TravelSalesman travelSalesman : list) {
            LatLng latLng = new LatLng(travelSalesman.getx(), travelSalesman.gety());
            latLngs.add(latLng);
            MarkerOptions options = new MarkerOptions();
            options.anchor(0.5f, 0.5f).icon(bitmap).position(latLng);

            //這個步驟將所有的點都展示在地圖上，自動縮放
            builder.include(options.getPosition());

            markers.add(aMap.addMarker(options));
//            markers.add(aMap.addMarker(options1));
        }

        Polyline polyline = aMap.addPolyline(new PolylineOptions().
                addAll(latLngs).width(5).color(getContext().getResources().getColor(R.color.yellow_color)));
        polylineList.add(polyline);

        cameraUpdate = CameraUpdateFactory.newLatLngBounds(builder.build(), 15);
        aMap.animateCamera(cameraUpdate);
    }

三、繪製InfoWindow，按照官方的文檔繪製的InfoWindow只能在一個點是哪個展示，不能在全部點上全展示，我們需要另外的方法解決問題。

a.繪製完點和線發現點和線很彆扭，沒有對齊，具體原因在哪？
尋找發現 anchor屬性的默認值是0.5f和1.0f,是相對x和y方向的偏移比例，把MarkerOptions 的anchor這個屬性值改爲0.5和0.5，點和線就能顯示的正常了

b.那些排序數字用InfoWindow實現時每次只能展示一個，必須尋求其它方法
這是anchor屬性給了我靈感，一個座標可以繪製一個點，那多個也可以呀。所以我想到可以在要展示排序的地方繪製兩個點，改變x和y方向的偏移比例就行。
例，我的項目中是這樣用的：

      //拜訪門店
        int i = 0;
        BitmapDescriptor bitmapBranch = BitmapDescriptorFactory.fromResource(R.mipmap.red_point);
        for (TravelBranch travelBranch : listBranch) {
            i++;
            LatLng latLng = new LatLng(travelBranch.getXlocationLat(), travelBranch.getYlocationLng());
            MarkerOptions options = new MarkerOptions();
            options.anchor(0.5f, 0.5f).icon(bitmapBranch).position(latLng);
            MarkerOptions options1 = new MarkerOptions();
            if (i == listBranch.size()) {
                options1.anchor(0.5f, 1.1f).icon(BitmapDescriptorFactory.fromView(getInfoView("終", true, travelBranch, salesman))).position(latLng);
            } else {
                options1.anchor(0.5f, 1.1f).icon(BitmapDescriptorFactory.fromView(getInfoView("" + i, false, travelBranch, salesman))).position(latLng);
            }
            markers.add(aMap.addMarker(options));
            markers.add(aMap.addMarker(options1));