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. Neo4j插件安装

    Neo4j插件安装 Author:wss Date:2022.6.9 Topic:Neo4j插件安装 一.前言 昨天再次安装Apoc插件,又去找之前看的教程,有些地方不够清晰要几个教程对比着看,想到可 ...

  2. 1. ansible学习总结： 基础模块

    copy模块: #传输文件到目标机 ansible -i /kingdee/ansible/host all -m copy -a 'src=/tmp/aaaa.tgz dest=/tmp/aaaa. ...

  3. shell_Day03

    嗯,这是第二天,吧 wc word count 统计文本文件中的字符个数 -l 查看行数 -w 查看字符个数 -c 查看文件大小(字节)   cut 用来分割文件内容 -d 指定分隔符,delimit ...

  4. Python的入门学习Day 28~30——form”夜曲编程“

    Day 28 in Day 29 time: 2021.8.26. ​ 时间模糊了界限,虽我日渐走远.转眼而过的二十多天,既留下了夏天在沙滩上的足迹,同时也为黄金色的秋日铺上留白的画卷.键盘敲时,熟悉 ...

  5. Pyqtgraph入门

    一.介绍 1.1 什么是pyqtgraph? PyQtGraph是Python的图形和用户界面库,它充分利用PyQt和PtSide的高质量的图形表现水平和NumPy的快速科学计算与处理能力,在数学.科 ...

  6. 用C++写的文件字符数、单词数以及总行数的统计（源码）

    #include <stdio.h> #include <fstream> #include <string> using namespace std; //计算单 ...

  7. Docker 基础常用命令

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...

  8. 在idea中查看jar包源码

    文章目录 准备jar包 idea打开文件夹 最后一步 准备jar包 例如,我准备看resin的jar,在桌面准备了一份 idea打开文件夹 在idea中file====>open=====> ...

  9. core文件段错误---对应内核处理

    do_page_fault __bad_area __bad_area_nosemaphore force_sig_info_fault

  10. (Yocto)Imx8mp的时间结构

    1.构成图 #kernel\time\timekeeping.c #drivers\rtc\class.c 1.time date source 解释       rx8010sj: 自己定制的开发板 ...