leaflet添加marker

最新推荐文章于 2025-09-24 00:00:00 发布

原创最新推荐文章于 2025-09-24 00:00:00 发布 · 691 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

mapbox+leaflet 专栏收录该内容

64 篇文章

订阅专栏

该文章展示了如何在地图上使用L.canvasIconLayer创建图层，并通过遍历数据来添加Marker。每个Marker的坐标从数据中获取，并自定义了图标大小和位置。

      // 渲染假数据
      makeFakeToMap(data) {
        // 创建图层，添加到 map
        let map = this.$refs.map.map
        let fakeLayer = L.canvasIconLayer({}).addTo(map);
        // console.log(data)
        // // 把 Marker 添加到图层
        data.forEach(e => {
          if (e.lat != null) {
            // 添加marker
            let icon = L.icon({
              iconUrl: e.icon,
              iconSize: [16, 16],
              iconAnchor: [8, 8]
            });
            let marker = L.marker([e.lng, e.lat], {
              icon: icon
            })
            // 把 Marker 添加到图层
            fakeLayer.addLayer(marker);
          }
        });
      },