9.增加Marker 标记

 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             html,body {

14                 height: 100%;

15             }

16

17             #mapid {

18                 height: 500px;

19             }

20         </style>

21     </head>

22     <body>

23         <div id="mapid"></div>

24

25         <script type="text/javascript" src="leaflet/leaflet.js"></script>

26

27         <script type="text/javascript">

28         const {dir} = console;

29             const mymapOptions = {

30                 // 地图中心

31                 center: [50.5, 30.5],

32                 // 地图的最小缩放级别

33                 minZoom: 12,

34                 // 初始化时的缩放等级

35                 zoom: 13,

36                 // 地图的最大缩放级别

37                 maxZoom: 14,

38                 // 强制让地图的缩放级别始终为这个值的倍数

39                 zoomSnap: 1,

40                 // 版权控件添加到地图中（即水印）

41                 attributionControl: false,

42                 // 是否显示zoom 缩放控件,默认是true

43                 zoomControl: true,

44             }

45

46             const mymap = L.map('mapid', mymapOptions);

47             dir('getBounds()', mymap.getBounds())

48

49

50

51

52

53             const imageUrl = './leaflet/images/b1-floor1-full-h.png';

54             const imageBounds = [

55                 [50.52728768645296, 30.62301635742188],

56                 [50.472692651662115, 30.376853942871097]

57             ];

58

59             const imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mymap);

60

61             // 监听事件

62             mymap.on('click', (e) => {

63                 console.log('e', e)

64

65                 const myIcon = L.icon({

66                     iconUrl: './leaflet/images/marker-icon.png.png',

67                     iconSize: [38, 95],

68                     // 图标 "tip" 的坐标（相对于其左上角）。

69                     //图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。

70                     iconAnchor: [22, 94],

71                     // 弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开

72                     popupAnchor: [-3, -76],

73

74                 });

75

76                 const markerOptions = {

77                     icon: myIcon,

78                 }

79

80

81                 const markerLatlng = L.latLng(e.latlng);

82

83                 const mapMarker = L.marker(markerLatlng).addTo(mymap);

84             })

85

86         </script>

87

88     </body>

89 </html>
巴特西

9.增加Marker 标记

最新文章

热门文章
