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. 钉钉获取群openConversationId方式以及企业内部机器人发送群消息

    https://open-dev.dingtalk.com/apiExplorer#/jsapi?api=biz.chat.chooseConversationByCorpId 通过上述URL进入钉钉 ...

  2. linux开机出现grub界面

    今天开机时候突然出现grub界面,并且卡在这里,记录一下解决办法 ①输入ls 2. 输入ls (hd0,6)/ 可以看到返回的就是linux系统的根目录,说明这个磁盘就是我们的系统的所在盘 如果ls ...

  3. mysql生成随机数的函数

    例:update [tablename] set [columnname] = FLOOR( 6546541 + RAND() * (987987989 - 6546541)) where ? FLO ...

  4. Veeva_001常见问题总结

    1.时间互动轴:其他代表与该医生的互动记录 2.Call的拜访流程 : 用户在Ipad端先制定计划拜访(已计划:青色)后,需手动同步到服务器上: 进入拜访详细,选择联系人和产品及相关拜访信息等,并'保 ...

  5. a 标签下载文件重命名文件失效

    背景 : a标签下载cos桶文件download失效 原因:下载的链接跨域,download 属性重命名文件失效,浏览器无法获取到文件,无法进行更改. 解决办法: downloadFile(url, ...

  6. QT使用中出现的问题

    1.运行程序程序弹出The CDB process terminated 2.调试弹出窗口提示缺少qtcreatorcdbext.dll 1.运行程序程序弹出The CDB process termi ...

  7. ScrollView里面不能嵌套一个FlatList，这个需要如何通过FlatList自己单独实现

    1. 组件结构 2. 实现的效果图 3. 重点解释一些方法 (1)stickyHeaderIndices ,这个属性在ScrollView里面,FlatList也继承了该属性,其主要作用,会让第一个成 ...

  8. Pytorch实战学习(七)：高级CNN

    <PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili Advanced CNN 一.GoogLeNet Inception Module:而为了减少代码的冗余,将由(卷积(C ...

  9. D - Pair of Topics

    D - Pair of Topics 思路: 这个题需要一点思路,ai+aj>bi+bj可以转换成ai-bi+aj-bj>0,也就是c[i]=a[i]-b[i],只需要找c[i]+c[j] ...

  10. pyspark 结构化数据开发实例

    什么是SPARK? 1. 先进的大数据分布式编程和计算框架 2. 替换Hadoop 中的MR计算引擎. 3. 内存分布式计算:运行数度快 4. 可以使用不同的语言编程(java,scala,r 和py ...