5. icon创建
2024-10-22 08:31:48
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
8 <title></title>
9 <style type="text/css">
10 body {
11 margin: 0;
12 }
13
14 #mapid {
15 height: 500px;
16 }
17 </style>
18 </head>
19 <body>
20 <div id="mapid"></div>
21
22 <script type="text/javascript" src="leaflet/leaflet.js"></script>
23
24 <script type="text/javascript">
25 const mymapOptions = {
26 // 地图中心
27 center: [50.5, 30.5],
28 // 地图的最小缩放级别
29 minZoom: 11,
30 // 初始化时的缩放等级
31 zoom: 13,
32 // 地图的最大缩放级别
33 maxZoom: 15,
34 // 强制让地图的缩放级别始终为这个值的倍数
35 zoomSnap: 1,
36 // 版权控件添加到地图中（即水印）
37 attributionControl: false,
38 // 是否显示zoom 缩放控件,默认是true
39 zoomControl: true,
40 }
41
42 const mymap = L.map('mapid', mymapOptions);
43
44 const myIcon = L.icon({
45 iconUrl: './leaflet/images/marker-icon.png.png',
46 iconSize: [38, 95],
47 // 图标 "tip" 的坐标（相对于其左上角）。
48 //图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
49 iconAnchor: [22, 94],
50 // 弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开
51 popupAnchor: [-3, -76],
52
53 });
54
55 const markerOptions = {
56 icon: myIcon,
57 // 不生效，默认是没有tooltip 提示
58 title: 'ddddd'
59 }
60
61 const mapMarker = L.marker(markerLatlng).addTo(mymap);
62 // const mapMarker = L.marker([50.5, 30.5]).addTo(mymap); 可以是数组的形式
63
64 </script>
65
66 </body>
67 </html>
最新文章
- Microsoft Visual Studio 插件
- 初级Bug率，随时受不了
- 用数组求Fibonacci数列
- 矩阵的QR分解
- c#调用c++动态链接库的问题
- wordpress修改固定链接及修改链接后链接提示404错误的解决办法
- ServletInvocableHandlerMethod:167 - Error resolving argument
- IOS学习之路十五（UIView 添加背景图片以及加边框）
- 《火球——UML大战需求分析》(第2章 耗尽脑汁的需求分析工作)——2.1 需求分析面面观
- php 上传文件 $_FILES['']['type']的值
- 手机装linux系统
- 《Java并发编程实战》第二章 线程安全 札记
- gridcontrol第一行为0，没有选中为-999999
- asp.net core 2.0的认证和授权
- Using IntelliJ IDEA as the Vim Editor
- （3.1）mysql备份与恢复之mysqldump
- 如何在myeclipse中实现jquery的自动提示功能
- git push error HTTP code = 413
- mybatis随笔一之SqlSessionFactoryBuilder
- vue控制台报错