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

62             const mapMarker = L.marker(markerLatlng).addTo(mymap);

63             // const mapMarker = L.marker([50.5, 30.5]).addTo(mymap); 可以是数组的形式

64         </script>

65

66     </body>

67 </html>

2. Marker 标记(就是在地图上放上标记)的更多相关文章

  1. 机器学习进阶-项目实战-信用卡数字识别 1.cv2.findContour(找出轮廓) 2.cv2.boudingRect(轮廓外接矩阵位置) 3.cv2.threshold(图片二值化操作) 4.cv2.MORPH_TOPHAT(礼帽运算突出线条) 5.cv2.MORPH_CLOSE(闭运算图片内部膨胀) 6. cv2.resize(改变图像大小) 7.cv2.putText(在图片上放上文本)

    7. cv2.putText(img, text, loc, text_font, font_scale, color, linestick) # 参数说明:img表示输入图片,text表示需要填写的 ...

  2. baidu 地图 鼠标移上显示标签 鼠标离开隐藏标签

    为了解决 label太多,文字会重叠看不清 所以提出这种办法 核心代码 1,创建的时候 将label设置为隐藏 2,通过百度地图监听事件 ,  mouseover或onmouseover 触发显示 3 ...

  3. D3力布图绘制--在曲线路径上添加文本标记

    今天遇到一个在曲线路径上标识文本标记的问题,找到一个比较好的解决思路,在这里分享下: 使用d3建立的Force Layout,加上自定义的箭头形状,将多条连接线线改成弧线(https://www.cn ...

  4. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  5. 一个tomcat上放多个webapp问题，那这多个webapp会不会竞争端口呢？不会！安全两码事

    1.一个tomcat上放多个webapp问题,那这多个webapp会不会竞争端口呢?不会!安全两码事

  6. 安利一款强大的学习软件XMind(顺便放上这几天制作的JavaSE的思维导图day1-day4)

    最近在学习Java,并且在使用一款非常酷炫无敌吊炸天的软件,思维导图制作神器-XMind,然后就像分享给大家,至于XMind是什么大家自行百度,在这里我就不赘述了 我这里说下我认为的好的实用的常用快捷 ...

  7. UITableViewCell上放UICollectionView ，UICollectionViewCell无法复用bug

    如题: UITableViewCell上放UICollectionView ,UICollectionViewCell无法复用bug 如果UITableViewCell的size大于整个collect ...

  8. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  9. 无法处理文件 MainForm.resx，因为它位于 Internet 或受限区域中，或者文件上具有 Web 标记。要想处理这些文件，请删除 Web 标记

    无法处理文件 MainForm.resx,因为它位于 Internet 或受限区域中,或者文件上具有 Web 标记.要想处理这些文件,请删除 Web 标记 问题: 由于文件锁定,VS不能正常读取. 解 ...

  10. js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）

    js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...

随机推荐

  1. js 数字千元符号分割

    /* * 参数说明:* number:要格式化的数字* decimals:保留几位小数 * dec_point:小数点符号* thousands_sep:千分位符号* */export functio ...

  2. Oracle —— 对表数据操作的各种小Tip

    1.清空某表数据 TRUNCATE TABLE schema_name.table_name 例如:在名为test的schema下,有一张名为user的表,故此,可用TRUNCATE TABLE te ...

  3. Angular 依赖注入的错误 NullInjectorError, No provider for XXX

    一.在module的providers区域里,为pipe维护具体的实现类 二.如果不想改动module.ts,可选择直接在组件中注入

  4. Win10系统桌面exe文件图标消失不见了的解决方法

    使用 Windows10正式版系统 过程中,发现桌面上的一些exe文件图标突然消失不见了.虽然这些exe程序还能够正常运行,可是感觉还是非常不舒服.这该怎么办呢?接下来,就随小编看看Windows10 ...

  5. js-惰性函数

    1. 需求:我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意是首次. 使用场景:当我们每次都需要进行条件判断,其实只需要判断一次,接下来的使用方式都不会发生改变的时候, ...

  6. JAVA 【SM2】加密解密

    JAVA [SM2]加密解密 前言:最近项目中必须用到SM2的加密解密 引入的Maven依赖 <dependency> <groupId>cn.hutool</group ...

  7. NXOpen拉伸

    #include <NXOpen/Annotations.hxx> #include <NXOpen/Assemblies_Component.hxx> #include &l ...

  8. 【坑】 centos 7.6 使用ssh 秘钥登录遇到的问题

    问题: 我在master1上面创建了一个ssh的秘钥文件,通过ssh-copy-id 传送四台主机,然后使用ansible all -m ping 发现有台机器就是有问题 这是怎么回事???一样的配置 ...

  9. [1] Multi-View Transformer for 3D Visual Grounding 论文精读

    参考: https://zhuanlan.zhihu.com/p/467913475 3D Visual Grounding小白调研笔记 https://zhuanlan.zhihu.com/p/34 ...

  10. 【Word】如何批量导出ppt中的备注

    [Word]如何批量导出ppt中的备注 文件 | 导出 | 创建讲义 | 备注在幻灯片旁 在word中删除左边两列,复制剩下的表格 | 粘贴-只保留文本