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. 使用vue+iview创建自己的对话框组件

    通过对别的案例反复研究,终于总结出自己对于使用vue+iview创建组件的步骤: 第一步:编辑新建对话框组件(子组件) <template> <div> <!-- mod ...

  2. [CSS]隐藏浏览器滚动条

    ::-webkit-scrollbar {   display: none; /* Chrome Safari */ }

  3. Mac 压缩软件Keka

    ​ mac 的压缩软件Keka,相对比较好用的一款压缩软件 Keka - the macOS file archiver 点击下载 安装就好. ​编辑 支持可创建的压缩文件格式,和可解压缩的文件格式列 ...

  4. ubuntu下安装使用jupyter

    sudo snap install jupyter安装,jupyter notebook使用,到浏览器访问服务URL这种使用方式不再赘述. 如何在服务端开启jupyter服务供客户端使用有待研究. 本 ...

  5. ENGG1340 Computer Programming II

    课程内容笔记,自用,不涉及任何 assignment,exam 答案 Notes for self use, not included any assignments or exams Module ...

  6. CH32F103C8T6调试口Disable后的修复办法

    1.问题描述 因为软件编程,将CH32F103的 debug disable了,无法通过仿真器下载程序. 2. 修复 2.1 解决思路 利用厂家给的串口ISP进行下载(HUSB或者COM) 2.2 硬 ...

  7. win10开机无限自动修复篇

    转载请注明来源:https://www.cnblogs.com/Sherlock-L/p/15521381.html 关键词:win10.开机无限自动修复.nvlddmkm.sys 哈哈哈,其实这篇随 ...

  8. java8线程池创建并使用

    1.创建@Configurationpublic class ThreadPoolConfig { /** * 创建线程池 */ @Bean(name = "threadPool" ...

  9. htmlApk:一个轻松在线打包生成双端app应用的网站

    htmlApk平台,基于HTML打包制作APP,只要有手机网站或者HTML文件,3分钟即可生成app多端应用,同时拥有苹果版和安卓版双系统APP,快速进入移动互联时代. 全面支持h5网址打包,可设置图 ...

  10. IE和FireFox 对FORM enctype属性的认识存在差异

    IE和FireFox 对FORM enctype属性的认识存在差异,一般来说对于动态创建的form,如果因为要上传文件的原因很自然的会使用类似如下的代码: 1  //create form 2  th ...