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. 了解ASP(三) -- Cookie, Session, Application

    ASP一共内建了7个对象,有Session.Application.Cookie.Response.Request.Server,这些对象都可以直接使用. 1. 什么是 Cookie? 1. cook ...

  2. 1970：【15NOIP普及组】扫雷游戏

    1970:[15NOIP普及组]扫雷游戏 时间限制: 1000 ms         内存限制: 131072 KB提交数: 5638     通过数: 3495 [题目描述] 扫雷游戏是一款十分经典 ...

  3. 安全测试-WEB安全渗透测试基础知识（二）

    1.2. 计算机网络 1.2.1. 计算机通信网的组成 计算机网络由通信子网和资源子网组成. 其中通信子网负责数据的无差错和有序传递,其处理功能包括差错控制.流量控制.路由选择.网络互连等. 其中资源 ...

  4. JDK卸载与JDK12 安装

    JDK卸载与JDK12 安装 一.JDK卸载 控制面板>程序和功能>jdk程序(java 8 update 391:java SE Development Kit8 update 391) ...

  5. 蓝牙mesh组网实践（节点功能介绍）

    目录 未配网设备在配好网,被纳入网络后,可称之为节点. 蓝牙mesh网络中,节点可以有选择地支持四大功能--朋友.低功耗.转发.代理功能,可以复用多个功能(由于单片机硬件限制,ch582除了复用转发功 ...

  6. PhpSpreadsheet导出科学记数转成字符串

    $logistic_code."\t"   加上\t即可转成字符串

  7. AcWing 839. 模拟堆 2022/5/30

    关键代码: void head_swap(int a, int b){ swap(ph[hp[a]], ph[hp[b]]); swap(hp[a], hp[b]); swap(h[a], h[b]) ...

  8. Android 杂项

    1. String to InputStream new ByteArrayInputStream(str.getBytes());

  9. 蓝牙信标、智能楼宇应用国产低功耗芯片BLE5.2 PHY6252

    PHY6252是一款支持BLE 5.2功能的系统级芯片(SoC),集成了低功耗的高性能多模射频收发机,搭载32位高性能低功耗处理器,提供64K retention SRAM.可选512/256K Fl ...

  10. [笔记]windows cmd常用命令

    1.返回上一级目录  目前似乎没有直接的命令,参考  https://stackoverflow.com/questions/48189935/how-can-i-return-to-the-prev ...