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             // Tooltip 提示标记

65             mapMarker.bindTooltip('ffffffff').openTooltip();

66

67

68         </script>

69

70     </body>

71 </html>

3. Tooltip 工具提示的更多相关文章

  1. Highchart ：tooltip工具提示

    Highcharts翻译系列之十六:tooltip工具提示tooltip工具提示 参数 描述 默认值 animation 启用或禁用提示的动画.这对大数据量的图表很有用 true background ...

  2. microtip Tooltip工具提示样式

    最近开发项目,想增加滑动提示文字,类似img alt和i的title,但是效果都不是很理想,当然jq也有,但是用起来比较繁琐,使用不是特别方便 于是在github上看到了一个不错的库: https:/ ...

  3. Bootstrap 标签页和工具提示插件

    一．标签页 标签页也就是通常所说的选项卡功能. //基本用法 <ul class="nav nav-tabs"> <li class="active&q ...

  4. 关于【bootstrap】中，【tooltip】的不算bug的bug的个人看法

    先说下遇到这个问题的背景吧. 就是在页面中有个div,这个div右上角(或者其他位置)有个 × 的图标(这个图标添加tooltip工具提示),光标移到这个图标时,触发tooltip,提示“点击移除”这 ...

  5. 第二百四十五节，Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  6. 4_jquery

    官网:www.jquery.com 兼容: 1.jquery-3.1.0.js :form.attr("checked","false")无效 2.firefo ...

  7. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  8. jqueryUI 插件

    1,拖拽插件  draggable 拖拽插件draggable的功能是拖动被绑定的元素, 当这个jqueryUI插件与元素绑定后,可以通过调用draggable()方法,实现何种拖拽元素的效果 $(s ...

  9. 不就是抽个血吗，至于么-jQuery，Linux完结篇

    hi 趁着周一去抽血化验,真开心...下午报告才出来,不过早上来了就开始各种晕菜,叫错名字,说错话.....至于么.. 还有在教研室的30天就可以肥家了,凯森凯森.今天不想干活(哪天想干过我就问问), ...

  10. FusionCharts 相关知识

    FusionCharts1.平均线: <trendLines><line startValue='{0}' toolText='平均线' color='#FF0000' displa ...

随机推荐

  1. Mybatis学习笔记【狂神说】

    环境 Jdk 1.8 Mysql 5.7 Maven 3.6.1 IDEA 回顾 JDBC Mysql java基础 Maven Junit SSM框架:都是有配置文件的.最好的学习方式:看官方文档. ...

  2. .net core 3.1项目运行在Windows server 2012R2服务器上，Decimal类型小数点不见了，求解！32112.7958

    .net core 3.1项目运行在Windows server 2012R2服务器上,Decimal类型小数点不见了,求解! string str = "1002910.8241" ...

  3. CodeGym自学笔记07——入门Java书籍

    入门Java书籍 Head First Java Java:The Complete Reference,作者:Herbert Schildt   这本书对初学者也很有好处.与前一本书的主要区别在于素 ...

  4. 2022-05-16内部群每日三题-清辉PMP

    1.项目可交付成果已移交给客户,项目经理现在必须收集项目参与者的反馈意见.项目经理应该查阅哪份文件来确定哪些人应该被包含进请求反馈意见的名单中? A.相关方登记册 B.沟通管理计划 C.经验教训 D. ...

  5. 微信小程序中实现自定义省市区选择

    背景: 1.小程序官方提供的省市区组件的数据与原有的数据对应不上,官方的数据太旧 2.小程序重构以后没有在使用vant等框架 实现过程: 1.安装依赖 a.微信小程序使用npm包配置: 1.初始化pa ...

  6. docker 部署mongodb 并建立用户和授权数据库

    docker pull mongo:4.4.8 (拉取镜像) docker run --name mongo -v /data/mongo-data:/data/db -p 27018:27017 - ...

  7. 【Go】类型转换

    字符串转int32 package main import ( "fmt" "strconv" ) func main() { str := "123 ...

  8. 再识redis-2

    Redis初识 特点关键字: 高性能Key-Value服务器 ops能达到十万级别 每秒能执行约11万集合 每秒约81000-条记录 主要数据结构 列表 集合 有序集合 散列(别名哈希 Redis的哈 ...

  9. 华为R&W典型园区网络设计

    PS:本人正在学习HCIP中,想到一个典型的园区网络就自己用ENSP搭建了一个典型拓扑分享给大家一起学习 拓扑图如下: 要求已经写在拓扑结构下下方文本框中请自行查看! 配置如下(没有专门的命令插入我就 ...

  10. [转载] MATLAB | RGB image representation

    转载自https://www.geeksforgeeks.org/matlab-rgb-image-representation/ MATLAB | RGB image representation ...