Javascript 如何突出显示传单地图（nuxt/vue）中已单击的标记

我有一张单张地图，上面显示了一个地区的不同餐馆和徒步旅行路线。 当用户单击一个标记时，我会在下面的一个div中显示有关它的信息

然而，如果你点击一个标记，它会在地图上高亮显示，这样你就可以准确地看到你正在阅读的标记

然而，我似乎找不到这样做的方法

标记是通过使用v-for循环通过“location”对象的JSON文件创建的，JSON示例： 在我看来，一种方法可以是：

创建所有标记并添加到阵列

将它们全部添加到地图中

单击一个标记后，在数组中找到该标记，更新其图标以显示其当前选定的标记

移除所有标记

用现在更新的标记重新打印它们

然而，这种方法似乎太过分了，所以我对此表示怀疑

有人能给我一些想法吗？干杯

这是我在“了解该地区”页面上的地图：

。。。
{{selectedPin.name}
{{selectedPin.type}
{{selectedPin.description}}

从“@/static/json/locations.json”导入json
从“传单”导入{latLng，icon}
导出默认值{
名称：'区域'，
数据：函数（）{
返回{
//介绍视频设置#############
视频语言：“英语”，
英语RC:'https://www.youtube.com/embed/lRKmJqDbVsY',
spanishSrc:'https://www.youtube.com/embed/q0WkEkIMmQo',
currentSrc:'https://www.youtube.com/embed/lRKmJqDbVsY',
//图像库设置#############
开关选项：{
格雷博：是的，
循环：对，
自动播放：{
延误：5000，
disableOnInteraction:false，
},
分页：{
el:“.swiper分页”，
},
地图：此。$refs.map，
},
//阵列存储画廊图像#############
图像：[]，
位置：json.locations，
//用于存储餐厅对象的阵列#############
餐厅：[]，
//用于存储徒步旅行路线对象的阵列#############
步行：[]，
//单张徒步小径标记图标#############
walkIcon:icon({
iconUrl:“/mapmarks/hipping.png”，
iconSize:[20,20]，
iconAnchor:[16,37]，
}),
//传单餐厅标记图标#############
图标：图标({
iconUrl:“/mapmarks/restaurant.png”，
iconSize:[20,20]，
iconAnchor:[16,37]，
}),
//存储当前选择的位置数据#############
所选PIN码：{
名称：'请单击地图pin了解更多信息'，
},
}
},
//导入山上的图像#############
安装的（）{
this.importImages（require.context（“~/assets/AreaPictures/”，true））
this.importLocations（this.locations）
console.log（this.fas）
},
方法：{
changeSrc（）{
如果（this.videoLanguage==='English'）{
this.currentSrc=this.englishSrc
}否则{
this.currentSrc=this.spanishSrc
}
},
//导入画廊图片#############
进口量（r）{
r、 keys（）.forEach（（键）=>{
var path=key.substring（1）//----由于某种原因，该路径包含一个。因此我将其删除
这个。图像。推({
imageURL:path，//----创建一个新对象并将其添加到图像中
})
})
},
//将JSON数据拆分为餐厅和徒步旅行路线数组#############
导入位置（）{
this.restaurants=this.locations.restaurants
this.walks=this.locations.walks
},
//通过使用当前选定地图标记的ID查找其数据#############
getPin（id）{
出租项目
如果（id.includes（'W'））{
for（设i=0；i

编辑： 上下文图像

我的建议是：

选择标记后，向html元素添加一个类，这将添加一个阴影，并缩放图标：

.markerSelected{
转换：比例（1.5）；
滤镜：投影（0px 0px 10px rgba（0,0,0,5））；
}

另外，为了捕获事件，我建议使用事件冒泡。要实现此目的，请将您的

@单击

添加到父元素中，然后使用

event.target

查找单击的图标

发出事件后，将

selectedId

数据参数设置为所选项目的ID。我在这里假设步行和餐馆id是独一无二的，不会有冲突

然后，按如下方式更新HTML：

读一读：

一个

    "locations": {
            "restaurants": [{
                    "id": "R1",
                    "name": "El Rancho Grande",
                    "latlong": [
                        "36.90316216998795",
                        "-4.115129907833307"
                    ],
                    "type": "Restaurant",
                    "description": "This is a description of the location",
                    "img": "https://www.viewranger.com/routelibrary/discoverywalks/axarquia/0115.jpg"
                }
...

   ...
        <!-- ############# INTERACTIVE MAP ############# -->
        <div class="area__map">
          <div id="map-wrap">
            <no-ssr>
              <l-map :zoom="13" :center="[36.9023, -4.1139]" ref="map">
                <l-tile-layer
                  url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
                ></l-tile-layer>
                <!-- ############# CREATE RESTAURANT MARKERS ############# -->
                <l-marker
                  v-for="restaurant in restaurants"
                  :key="restaurant.id"
                  :lat-lng="restaurant.latlong"
                  :icon="eatIcon"
                  v-on:click="getPin(restaurant.id)"
                ></l-marker>
                <!-- ############# CREATE HIKING TRAIL MARKERS ############# -->
                <l-marker
                  v-for="walk in walks"
                  :key="walk.id"
                  :lat-lng="walk.latlong"
                  :icon="walkIcon"
                  v-on:click="getPin(walk.id)"
                ></l-marker>
              </l-map>
            </no-ssr>
          </div>
          <!-- ############# SHOW CURRENT SELECTED MARKER INFO ############# -->
          <div class="area__map__selected-pin">
            <h3>{{ selectedPin.name }}</h3>
            <h4>{{ selectedPin.type }}</h4>
            <p>{{ selectedPin.description }}</p>
            <img
              v-if="selectedPin.img != ''"
              :src="selectedPin.img"
              class="area__map__selected-pin__selected-img"
            />
          </div>
          <div class="area__subheader triangle triangle-yellow"></div>
        </div>
    </template>
    
    <script>
    import json from '@/static/json/locations.json'
    import { latLng, icon } from 'leaflet'
    export default {
      name: 'Area',
      data: function () {
        return {
          // ############# INTRO VIDEO SETTINGS #############
          videoLanguage: 'English',
          englishSrc: 'https://www.youtube.com/embed/lRKmJqDbVsY',
          spanishSrc: 'https://www.youtube.com/embed/q0WkEkIMmQo',
          currentSrc: 'https://www.youtube.com/embed/lRKmJqDbVsY',
          // ############# IMAGE GALLERY SETTINGS #############
          swiperOption: {
            grabCursor: true,
            loop: true,
            autoplay: {
              delay: 5000,
              disableOnInteraction: false,
            },
            pagination: {
              el: '.swiper-pagination',
            },
            map: this.$refs.map,
          },
          // ############# ARRAY TO STORE GALLERY IMAGES #############
          images: [],
          locations: json.locations,
          // ############# ARRAY TO STORE RESTAURANT OBJECTS #############
          restaurants: [],
          // ############# ARRAY TO STORE HIKING TRAIL OBJECTS #############
          walks: [],
          // ############# LEAFLET HIKING TRAIL MARKER ICON #############
          walkIcon: icon({
            iconUrl: '/MapMarkers/hiking.png',
            iconSize: [20, 20],
            iconAnchor: [16, 37],
          }),
          // ############# LEAFLET RESTAURANT MARKER ICON #############
          eatIcon: icon({
            iconUrl: '/MapMarkers/restaurant.png',
            iconSize: [20, 20],
            iconAnchor: [16, 37],
          }),
          // ############# STORE THE CURRENTLY SELECTED LOCATION DATA  #############
          selectedPin: {
            name: 'Please click on a map pin for more information',
          },
        }
      },
      // ############# IMPORT THE IMAGES ON MOUNT #############
      mounted() {
        this.importImages(require.context('~/assets/AreaPictures/', true))
        this.importLocations(this.locations)
        console.log(this.fas)
      },
      methods: {
        changeSrc() {
          if (this.videoLanguage === 'English') {
            this.currentSrc = this.englishSrc
          } else {
            this.currentSrc = this.spanishSrc
          }
        },
        // ############# IMPORT GALLERY IMAGES #############
        importImages(r) {
          r.keys().forEach((key) => {
            var path = key.substring(1) //-----THE PATH FOR SOME REASON CONTAINS A . SO I REMOVE IT
            this.images.push({
              imageURL: path, //----- CREATE A NEW OBJECT AND ADD IT TO IMAGES
            })
          })
        },
        // ############# SPLIT JSON DATA INTO RESTAURANT AND HIKING TRAIL ARRAYS #############
        importLocations() {
          this.restaurants = this.locations.restaurants
          this.walks = this.locations.walks
        },
        // ############# FIND THE DATA OF THE CURRENTLY SELECTED MAP MARKER BY USING ITS ID #############
        getPin(id) {
          let item
          if (id.includes('W')) {
            for (let i = 0; i < this.walks.length; i++) {
              item = this.walks[i]
              if (item.id === id) {
                this.selectedPin = item
              }
            }
          } else if (id.includes('R')) {
            for (let i = 0; i < this.restaurants.length; i++) {
              item = this.restaurants[i]
              if (item.id === id) {
                this.selectedPin = item
              }
            }
          } else {
            window.alert('Error, no info on marker found')
          }
        },
      },
    }
    </script>
    
    <style lang="scss">
    ...