需求：将正在巡游的无人机的实时位置和方向显示在地图上。

刚开始的想法是将无人机以marker的方式添加到地图，后面发现marker的位置好改变，但方向不好做。后面转换思路，就好做了。

一、不以标记的形式添加到leaflet地图中，而是以普通的div形式，将这个div水平垂直居中于地图。

二、当它的坐标改了后，通过setView将地图的中心改成它的坐标。

三、它的方向就通过transform:rotate()去改变。

以下是模拟的代码：

<template>
    <div class="mark">
        <div id="map"></div>
        <div class="leaflet-img" :style="{transform:`rotate(${rotateDeg}deg)`}"></div>
        <div class="tip" @click="onClick">点击此处更换摄像头坐标和方向</div>
    </div>
</template>
<script>
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet/dist/leaflet.js";
export default {
    data(){
        return{
            map:null,
            /**
             * 地图选项
             */
            options: {
                zoomControl: false,
                attributionControl: false,
                minZoom: 10,
                maxZoom: 18,
                zoom: 13,
                center: [23.1163, 113.2621]
            },
            vectorLayerUrl:"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            rotateDeg:0
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            var mymap = L.map(this.$el.childNodes[0], this.options);
            this.map = mymap;
            L.tileLayer(this.vectorLayerUrl, {
                subdomains: ["1", "2", "3", "4"]
            }).addTo(mymap);
        },
        onClick(){
            let it = Math.random()*0.01;
            this.map.setView([23.1163+it,113.2621+it]);
            this.rotateDeg = Math.random()*360;
        }
    }
}
</script>
<style>
.mark{
    display: relative;
    height:400px;
    width:400px;
}
#map{
   width: 400px; 
   height: 400px;
}
.leaflet-img{
    position: absolute;
    width:90px;
    height:90px;
    background: url(../../assets/img/pance-camera.png);
    background-size:100% 100%;
    z-index:1000;
    top:155px;
    left:155px;
}
.tip{
    position:absolute;
    top:10px;
    left:20px;
    z-index:1000;
    padding:4px 10px;
    background-color: #fff;
    border:1px solid #dedede;
}
</style>