leaflet在vue中标记点(marker)的三种方式

在地图标记点,或者点击某处获取经纬度在地图操作中是必须的,整理了一下,三种方式进行使用:

main.js文件:

复制代码
import Vue from 'vue'
import App from './App.vue'

import L from "leaflet"
import "leaflet/dist/leaflet.css"
import icon from "leaflet/dist/images/marker-icon.png" // 引入leaflet默认图标
import iconShadow from "leaflet/dist/images/marker-shadow.png" // 引入leaflet默认图标
Vue.prototype.icoName = icon
Vue.prototype.iconShadowName = iconShadow

Vue.use(L)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
复制代码

vue文件:

复制代码
<template>
  <div class="mapBox">
    <div>在vue2中使用leaflet标记点</div>
    <!-- 地图容器 -->
    <div id="map"></div>
  </div>
</template>

<script>
  import defaultMark from '@/assets/mark.png'
  export default {
    name: 'LeafletMap',
    data() {
      return {
        map: null,
        defaultMark
      }
    },
    mounted() {
      // 地图初始化
      this.initMap()
    },
    methods: {
      // 使用id为map的div容器初始化地图,同时指定地图的中心点和缩放级别
      initMap() {
        let map = L.map("map", {
          center: [24.485666, 118.095498], // 中心位置
          zoom: 12, // 缩放等级
          attributionControl: true, // 版权控件
          zoomControl: true //缩放控件
        });
      
        this.map = map; // data上需要挂载
        this.map.on('click', i =>{
          // 点击获取地图上的经纬度
          console.log(i.latlng)
        })
        L.tileLayer(
          "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
        ).addTo(map) // 加载底图

        L.marker([24.485666, 118.12], {
          icon: new L.Icon({
            className: "lmap-icon",
            iconUrl:require('../assets/redMark.png'),
            iconSize: [24, 24],
            iconAnchor: [16, 16],
          })
        }).addTo(this.map);

        let DefaultIcon1 = L.icon({
          iconUrl: this.icoName,
             // shadowUrl: iconShadow,
          iconSize: [24, 41], //  图标的大小    【值1,值2】 为具体你自定义图标的尺寸,比如我图标尺寸是32×52,表示该图标:宽度32像素,高度:52像素,那么值1:就是32,值2:就是52
          shadowSize: [41,41], //  影子的大小    【值1,值2】 为具体你自定义阴影图标的尺寸,比如我图标尺寸是41×41,表示该图标:宽度41像素,高度:41像素,那么值1:就是41,值2:就是41
          iconAnchor: [24, 41], //  图标将对应标记点的位置 这个是重点, 【值1,值2】,值1:为图标坐标第一个值(即32)的一半,值2:为图标坐标第二个值(即52)
          shadowAnchor: [4, 62], // 相同的影子
          popupAnchor: [1, -24] // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的,文档默认原始值是[-1,-76],我是去一半值,取一半值调出来的
        })
        
        let markers1 = L.marker([24.485666, 118.095498], {
          icon: DefaultIcon1,
        }).addTo(this.map)
        
        let DefaultIcon2 = L.divIcon({
          className: "lmap-icon",
          html: `<div><span class="lmap-span">标3</span><img class="lmap-image" src="${this.defaultMark}"/></div>`,// shadowUrl: iconShadow,
          iconSize: [24, 41], //  图标的大小    【值1,值2】 为具体你自定义图标的尺寸,比如我图标尺寸是32×52,表示该图标:宽度32像素,高度:52像素,那么值1:就是32,值2:就是52
          shadowSize: [41,41], //  影子的大小    【值1,值2】 为具体你自定义阴影图标的尺寸,比如我图标尺寸是41×41,表示该图标:宽度41像素,高度:41像素,那么值1:就是41,值2:就是41
          iconAnchor: [24, 41], //  图标将对应标记点的位置 这个是重点, 【值1,值2】,值1:为图标坐标第一个值(即32)的一半,值2:为图标坐标第二个值(即52)
          shadowAnchor: [4, 62], // 相同的影子
          popupAnchor: [1, -24] // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的,文档默认原始值是[-1,-76],我是去一半值,取一半值调出来的
        })
        
        let markers2 = L.marker([24.52, 118.095], {
          icon: DefaultIcon2,
        }).addTo(this.map)
      }
    }
  }
</script>
<style scoped>
  #map {
    width: 800px;
    height: 500px;
    margin: 50px auto;
  }

  .lmap-image {
    width: 32px;
    height: 32px;
  }

  .lmap-span {
    display: inline-block;
    margin-left: 5px;
    padding: 5px;
    font-weight: bold;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
  }

  .lmap-text {
    display: inline-block;
    margin-left: 5px;
    padding: 5px;
    font-weight: bold;
    line-height: 20px;
    font-size: 16px;
    color: #fff;
    width: 500px;
    white-space: nowrap;
    position: absolute;
    text-align: center;
    top: 25px;
    left: -250px;
  }
</style>
复制代码

效果如下图:

标记需要文字标示的也可以在点击标记的时候用popup弹窗,也可以用DivIcon,第一种是在main.js页面引入框架的默认图标.看文档是不需要引入.第二种引入自己准备的图标图片第三种用了DivIcon,要是海量的标记也可以用Canvas-Markers插件,

demo代码地址:https://gitee.com/yuexiayunsheng/leaflet-map

 

posted @   月下云生  阅读(5845)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
点击右上角即可分享
微信分享提示