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>

5. icon创建的更多相关文章

  1. SuperMap iClient for JavaScript 新手入门

    地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...

  2. java第二次作业

    这次通过学习,我掌握了下拉菜单和单选按钮的使用下拉菜单构造方法:JComboBox() 创建具有默认数据模型的 JComboBox.JComboBox(ComboBoxModel aModel) 创建 ...

  3. php生成网页桌面快捷方式

    本文将介绍使用PHP生成网页桌面快捷方式的代码,并添加图标及解决不同浏览器保存出现的乱码问题. 我们访问网站时,如果网站的内容很有吸引,一般我们都会使用浏览器的收藏夹功能,收藏此网站. 在浏览器收藏的 ...

  4. Linux 下从头再走 GTK+-3.0 (三)

    之前我们为窗口添加了一个按钮,接下来让这个按钮丰富一点.并给窗口加上图标. 首先创建 example3,c 的源文件. #include <gtk/gtk.h> static void a ...

  5. shinydashboard包---为shiny提供BI框架

    1.安装 install.packages("shinydashboard") 2.基础知识 仪表盘有三个部分:标题.侧边栏,身体.下面是最最小的仪表面板页面的UI: ## ui. ...

  6. 仿SDWebImage

    仿SDWebImage 目标:模拟 SDWebImage 的实现 说明:整体代码与之前博客上的演练代码的基本一致,只是编写顺序会有变化! 在模仿 SDWebImage 之前,首先需要补充一个知识点:N ...

  7. Qt学习总结-ui篇

    控件设置透明度: QGraphicsOpacityEffect *effect = new QGraphicsOpacityEffect(this); effect->setOpacity(0. ...

  8. ios开发——实用技术篇&Pist转模型详细介绍

    Pist转模型详细介绍 关于Plist转模型在iOS开发中是非常常见的,每开一一个项目或者实现一个功能都要用到它,所以今天就给大家讲讲Plist怎么转成模型数据, 前提:必须有一个Plist文件或者通 ...

  9. Android添加桌面快捷方式的简单实现

    核心代码如下: Button bn = (Button) findViewById(R.id.bn); // 为按钮的单击事件添加监听器 bn.setOnClickListener(new OnCli ...

  10. SuperMap

    SuperMap iClient for JavaScript 新手入门 地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地 ...

随机推荐

  1. .net5的安装部署条件

    1.安装vs2019最新版本 2.安装 .net5最新版本的的Hosting Bundle 下载地址:https://dotnet.microsoft.com/download/dotnet/5.0 ...

  2. # HUAWEI--IPv6 over IPv4隧道配置（简单案例）

    HUAWEI--IPv6 over IPv4隧道配置(简单案例) 拓扑图 项目要求: PC3和PC4使用的IPv6的地址,路由和路由器之间的连接使用IPv4的地址并使用静态路由连接,路由器和PC机的连 ...

  3. 蓝牙mesh组网实践（常见调试问题整理）

    目录 ①初始化及配网过程中出错 ②发送模型返回错误代码 ③发送方成功,接收方丢包 ①初始化及配网过程中出错 1-1.返回错误代码-16,表示给dataflash分配的单个扇区的空间不够,需要加大CON ...

  4. u盘重装系统后怎么恢复成普通u盘使用，U盘启动盘还原的方法

    1.先将u盘插入到电脑,然后在电脑上按下win+r快捷键打开运行菜单,输入"cmd"回车确定打开命令提示符页面.   2. 然后在命令提示符输入"diskpart&quo ...

  5. netmiko批量操作网络设备_pandas版

    from concurrent.futures import ThreadPoolExecutor import netmiko import os from threading import Loc ...

  6. Vue中的样式作用域

    介绍对于Vue样式作用域的介绍 对于所有组件中的Css都是通用的 在未指定作用域之前 在A组件中定义的 {.h1{color:red}} 同样会在b组件中生效 如果在B组件中也定义了 h1元素. 虽然 ...

  7. asp.net core 全局授权管理系统简介

    大家好,我最近在做一个管理系统,我希望能做出一种授权机制,通过数据库的配置,来动态管控每个登入用于的访问权限. 因为才接触core不久,了解core的授权机制还是用了些时间的. 所以总结出来,供大家分 ...

  8. .net core 添加省市区三级联动以及编辑时显示选中的城市。

    1 @model Core.Net.Model.CoreNetBuild.CoreNetPrejectAllocation; 2 @using Core.Net.Common.Core.Net.Cor ...

  9. java中的Filter（过滤器）和Intercepter（拦截器）的认知

    一.过滤器的配置 首先,从认知方面看,如果自己真的对Filter和Intercepter 不熟悉或者忘记的话可以自己在IDEA中编写Demo进行查看两个的区别,这也是自己动手去认知的过程.首先从Fil ...

  10. Win7+VS2010 环境配置

    最后再次总结一些,Win7下的VS2010总共有三个变量配置: 1. 变量名:path 变量值:D:\Program Files\Microsoft Visual Studio 10.0\VC\bin ...