Leaflet Awesome Markers 使用教程

最新推荐文章于 2024-08-22 09:22:35 发布

霍薇樱Quintessa

最新推荐文章于 2024-08-22 09:22:35 发布

阅读量555

点赞数 8

本文链接：https://blog.csdn.net/gitblog_01167/article/details/141207446

版权

Leaflet Awesome Markers 使用教程

Leaflet.awesome-markers项目地址:https://gitcode.com/gh_mirrors/lea/Leaflet.awesome-markers

1、项目介绍

Leaflet Awesome Markers 是一个开源的 JavaScript 库，用于在 Leaflet 地图上创建多彩、图标化的、高分辨率的标记。该项目基于 Font Awesome 和 Twitter Bootstrap 图标，提供了丰富的标记样式和颜色选项，使得地图标记更加直观和美观。

2、项目快速启动

安装

首先，你需要在你的项目中引入 Leaflet 和 Leaflet Awesome Markers 的库文件。你可以通过以下方式引入：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 600px;"></div>
    <script>
        // 你的代码将在这里
    </script>
</body>
</html>

创建地图和标记

以下是一个简单的示例，展示如何在 Leaflet 地图上添加一个 Awesome Marker：

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

var marker = L.marker([51.5, -0.09], {
    icon: L.AwesomeMarkers.icon({
        icon: 'coffee',
        markerColor: 'red',
        iconColor: 'white',
        prefix: 'fa'
    })
}).addTo(map);