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. 代码随想录训练营day 1 |704 二分查找 27移除算法

    LeetCode 704.二分查找(C++) 题目链接 704.二分查找 题目描述:给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 ...

  2. reset slave

    reset slave 所有中继日志文件都被删除,即使它们还没有被复制 SQL 线程完全执行. reset slave all 所有中继日志文件都被删除,它会清除连接参数(需要重新change mas ...

  3. react+routerv6搭建项目

    目标配置:React + Hook + React-router-v6 + Mobx + AntD: 1.创建项目 npx npx create-react-app 项目名称 2.安装sass环境,r ...

  4. linux中安装doker

    1.更新yum为最新的 yum -y update 2.卸载旧版的docker sudo yum remove -y docker* 3.安装需要的软件包 yum install -y yum-uti ...

  5. LAN8720 调试笔记

    因为项目需要开始研究LAN8720,还没有仔细研究芯片手册就根据网上能找到的原理图画了第一版电路 调试整整花了我2天半,期间多亏硬汉哥的耐心解答.下面是我调试过程中遇到的一些坑   1.TPTX.TO ...

  6. linux基本命令说明参数

    linux基本命令说明参数 标签(空格分隔): Linux 1.# 表示权限用户(如:root),$ 表示普通用户 开机提示:Login:输入用户名 password:输入口令 用户是系统注册用户成功 ...

  7. Codeforces Global Round 17

    Codeforces Global Round 17 A. Anti Light's Cell Guessing 坑点:\(n=1,m=1\) 时答案为 \(0\) . 其他情况:当 \(n=1\) ...

  8. nodejs,阿里云手机号一键登录

    const Core = require('@alicloud/pop-core'); const accessKeyId = "xxxx" const accessSecret ...

  9. 自己写的java教程，免费分享

    自己写的一套java教程,主要用于内部培训使用,有需要的可以直接免费下载: http://it.zhenzikj.com/download/java.zip 一共写了3套: java语言基础.网络开发 ...

  10. Neo4j权威指南学习笔记第一章

    1.创建图数据库 1.1.创建电影节点 CREATE (TheMatrix:Movie {title:'The Matrix', released:1999, tagline:'Welcome to ...