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. 了解ASP(二)

    变量 ASP中的变量有普通变量,Session变量,Application变量. 变量的生存期 在子程序外声明的变量可被 ASP 文件中的任何脚本访问和修改. 在子程序中声明的变量只有当子程序每次执行 ...

  2. 【vite+pinia】

    vite 轻量快速热重载,开发环境中不需要打包操作,可以快速冷启动 按需编译,不需要等待整个应用编译完成 pinia 支持vue2和vue3,是vue专属的状态管理库,允许跨组件或者页面 共享状态 与 ...

  3. 2022-05-30内部群每日三题-清辉PMP

    1.对于一个长期的基础设施项目,由于全球商业环境,项目经理必须获得风险最小的供应商.项目经理应该使用什么合同类型? A.固定总价合同(FFP) B.成本加固定费用合同(CPFF) C.总价加激励费用合 ...

  4. docker部署flask+uwsgi+nginx+postgresql，解耦拆分到多个容器，实现多容器互访

    本人承诺,本博客内容,亲测有效. dockerfile文件, FROM centos:7 RUN mkdir /opt/flask_app COPY ./show_data_from_jira /op ...

  5. Linux 命令 diff

    比较两个文件不同 $ diff file1 file2 比较两个目录不同 $ diff --brief --recursive dir1/ dir2/ --brief 仅显示有无差异,不显示详细的信息 ...

  6. Python 切片/列表/字符串之间装换

    1. 怎么实现字符串变为list 使用split(),把字符串拆分再存入数组: 例子 input="ni si shi" output=input.split(" &qu ...

  7. 14.java 中缀表达式转后缀表达式

    思路如下: 1.初始化两个栈,运算符栈和中间结果栈 2.从左至右扫描 3.遇到数时直接压入s2 4.遇到运算符时,比较其与s1栈顶的优先级,有如下几种情况: 1)s1为空或栈顶为"(&quo ...

  8. Linux系统目录及说明

    Linux系统目录结构以及简单说明: (1)/:根目录 (2)/boot:很多Linux系统把内核映像和其他一些和启动有关的文件都放在这里. (3)/tmp:一般只是启动时产生的临时文件才会放在这个地 ...

  9. map转换 bean和list

    转实体类 JSONObject JSONObj = JSONObject.parseObject(JSON.toJSONString(resultMap));String result = JSONO ...

  10. GCC gcc 和g++

    GCC:GNU Compiler Collection(GUN编译器集合),它可以编译C,C++,Java,Fortran,Pascal,Object-C等语言. gcc是GCC中的GUN C Com ...