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. 肖sir__整理项目链接

    项目链接: https://www.cnblogs.com/xiaolehong/p/16460523.html 保险项目https://www.cnblogs.com/xiaolehong/p/16 ...

  2. case语法案例

    case语法案例 制作nginx启停脚本 1.条件: 2.思路: 3.脚本 添加删除openvppn用户的脚本 1.实现要求 2.具体脚本 case语法案例 制作nginx启停脚本 1.条件: 启动服 ...

  3. linux批量操作（一）

    一.常用命令 1.关闭所有java进程命令: ps -ef | grep java | grep -v grep | awk '{print $2}' | xargs kill -9 2.批量文本操作 ...

  4. 记录一次阿里云ECS搭建代理服务器的过程

    [参考资料](Tinyproxy安装与配置(ip代理) - 林先生 (downdawn.com)) 1.一键安装脚本 vim proxy.sh #! /bin/bash # 配置文件 CONFIG_F ...

  5. 初学银河麒麟linux笔记 第九章 QEMU安装arm虚拟机

    arm虚拟机无法用vm进行安装,因此需要安装QEMU虚拟机 参考: WIndows下使用Qemu安装Arm版Kylin系统_h1007886499的博客-CSDN博客_windows qemu arm ...

  6. vs MFC c++ rc文件的dilog打不开，显示加载失败

    最近在做一个项目,在vs2012上面用mfc画界面,由于没有确定好且不熟悉这个架构,控件类型变了又变,本人又是个有点强迫症的性格所以删掉了一些不用的控件,导致的结果就是上面说的,dialog打不开报加 ...

  7. 7.29关灯游戏,用script实现

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  8. Spark 中三种数据处理对象的区别： RDD-Dataset-Dataframe

    1,对比表:   RDD Dataframe Dataset 版本 1.0 1.3 1.6 描述 分布式数据集合 行列化的分布式数据集合  RDD 和 DataFrame的结合 数据格式 结构化和非结 ...

  9. mt5获取双色球

    string cookie=NULL,headers; char post[],result[]; string ssq=""; string url="http://k ...

  10. app打包尺寸

    APP上架图标要求 a.  app图标: ios: 1024x1024 png   尺寸要小  png 安卓:72x72 96x96 144x144 192x192 b.  app启动图: iOS 启 ...