Leaflet和VueJS中的地图标记

Question

我正在使用传单和 VueJS 2 ，我希望获得如下结果： 单击地图上的标记时，位置列表将水平显示，滚动到所选位置的中心。 相反，当您滚动到水平方向时，地图将以相应的标记为中心，该标记将突出显示。

我已经有了这个模板： Leaflet Map With Horizontal List

地图组件的代码如下：

    <div class="map" id="map">   
    <div class="placeHorizontalList" id="placeHorizontalList">
        <div v-for="(place, index) in placeList" :key="index">                                                        
            <img :src="place.media.main.src" >    
            <div class="placeHorizontalList__detail">
               <p>{{place.label}}</p>
               <p>{{place.text.displayAddress}}</p>                      
            </div> 
        </div>
     </div>  


<script>
export default{
    data() {
        return {
            map: null,
            tileLayer: null,
            placeList: []    
        }
    },
    mounted() {
        this.initMap(); 
        this.initMarkers();   
    },
    methods: {
        initMap() { 
            // INIT MAP
            this.map= L.map('map').setView([43.9493, 4.8055],13);
            this.tileLayer= 
               L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');  
            this.tileLayer.addTo(this.map); 
        },
        initMarkers() {
            // INIT MARKERS
                this.services.entityController.listPlaces(()=>{            
                    console.log("please wait")
                }, (results)=>{                                   
                    this.placeList= results;  
                    this.placeList.forEach(place => {                 
                        var marker= L.marker([place.geo.latitude, place.geo.longitude]);
                        marker.addTo(this.map); 
                        var layerGroup= L.layerGroup();                     
                        layerGroup.addLayer(marker);
                        place.marker_id= layerGroup.getLayerId(marker);
                        marker.on({click: this.clickMarker});  
               }, ()=>{
                   console.error("error")
               });                                          
          }); 
        }
   }


}


</script>