Leaflet 文字标注

 var customIcon = L.divIcon({
        className: 'custom-icon', // 自定义 CSS 类名
        html: `<img class="icon-img" src="${data.avatar}" alt=""></div><div class="icon-label">${data.name}</div>`,
      });

var marker = L.marker([latitude, longitude], { icon: customIcon }).addTo(map);

 

Leaflet是一个轻量级的JavaScript库,用于创建交互式的Web地图。要在Leaflet地图上添加文字,你可以使用`L.marker`、`L.popup`或直接在HTML元素中插入文本。下面是一些基本步骤: 1. **创建Marker**: - 首先,你需要创建一个标记点(Marker),表示地图上的位置,如: ```javascript var marker = L.marker([51.505, -0.09], { // 经纬度坐标 title: '我的位置', // 标题文字 }).addTo(map); ``` 2. **绑定popup内容**: - `L.popup()`可以创建一个弹出窗口(Popup),显示更多的信息: ```javascript marker.bindPopup('这是一个关于我的详细描述。'); ``` 或者,你可以预先设置Popup的内容: ```javascript var popupContent = '<h3>标题</h3><p>这是详细的文字描述。</p>'; var popup = L.popup().setContent(popupContent).openOn(marker); ``` 3. **HTML元素**: - 如果需要更复杂的布局,可以直接将HTML字符串插入地图容器内: ```html <div id="map" style="width: 600px; height: 400px;"></div> <script> var map = L.map('map').setView([51.5, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // 添加自定义HTML元素作为标注 var htmlElement = '<div class="leaflet-marker-icon" style="background-color: red;">Hello World!</div>'; L.DomUtil.create('div', 'my-custom-popup', map._container) .innerHTML = htmlElement; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值