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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章