From 3a941bb4be3f11acf178c3d2bd5bae88aab68f1c Mon Sep 17 00:00:00 2001 From: ptduy14 Date: Thu, 16 May 2024 23:04:56 +0700 Subject: [PATCH] change css style --- pages/ex-four.html | 68 ++++++++++++++++++++++++--------------------- pages/ex-one.html | 44 +++++++++++++++-------------- pages/ex-three.html | 5 ++-- pages/ex-two.html | 45 ++++++++++++++++-------------- style.css | 8 ++++-- 5 files changed, 91 insertions(+), 79 deletions(-) diff --git a/pages/ex-four.html b/pages/ex-four.html index 0d159df..ac3c5cb 100644 --- a/pages/ex-four.html +++ b/pages/ex-four.html @@ -4,7 +4,11 @@ Exemple Four - + -
-
MORE
-
-
-
-

- Thiết kế polygon hình tứ giác theo thao tác click chuột của người dùng: -

-
-
- 

+    
MORE

+    

+    

+      

+      

+        

+          Thiết kế polygon hình tứ giác theo thao tác click chuột của người
+          dùng:
+        

+      

+      

+        

 var polygonPoints = []
 var polygon;
 var marker;
 
 map.on('click', (e) => {
-  // kiểm tra nếu độ dài mảng polygonPoints thì vẽ polygon
-  if (polygonPoints.length == 4) {
-    polygon = L.polygon(polygonPoints, {color: 'red'}).addTo(map);
-    polygonPoints = []
-  } else {
-    polygonPoints.push(e.latlng)
-    marker = L.marker(e.latlng).addTo(map)
-  }
+// kiểm tra nếu độ dài mảng polygonPoints thì vẽ polygon
+if (polygonPoints.length == 4) {
+  polygon = L.polygon(polygonPoints, {color: 'red'}).addTo(map);
+  polygonPoints = []
+} else {
+  polygonPoints.push(e.latlng)
+  marker = L.marker(e.latlng).addTo(map)
+}
 })
-            

-        

-        Bài trước
+
-
+ Bài trước
+

Made by ptduy14 with love ❤️

@@ -72,20 +76,20 @@ '© OpenStreetMap', }).addTo(map); - var polygonPoints = [] + var polygonPoints = []; var polygon; var marker; - - map.on('click', (e) => { + + map.on("click", (e) => { // kiểm tra nếu độ dài mảng polygonPoints thì vẽ polygon if (polygonPoints.length == 4) { - polygon = L.polygon(polygonPoints, {color: 'red'}).addTo(map); - polygonPoints = [] + polygon = L.polygon(polygonPoints, { color: "red" }).addTo(map); + polygonPoints = []; } else { - polygonPoints.push(e.latlng) - marker = L.marker(e.latlng).addTo(map) + polygonPoints.push(e.latlng); + marker = L.marker(e.latlng).addTo(map); } - }) + }); diff --git a/pages/ex-one.html b/pages/ex-one.html index 43ccfd2..adf01a1 100644 --- a/pages/ex-one.html +++ b/pages/ex-one.html @@ -4,7 +4,11 @@ Exemple One - + -
-
MORE
-
-
-
-

- Chấm trên bảng đồ chọn Marker và Marker di chuyển theo thao tác của - người dùng: -

- -
- -
-
-
- 

+    
MORE

+    

+      

+      

+        

+          Chấm trên bảng đồ chọn Marker và Marker di chuyển theo thao tác của
+          người dùng:
+        

+        
+        

+        
+        

+      

+      

+        

 var marker;
 
 // hiển thị nhiều marker khi click
@@ -51,11 +53,11 @@
   marker.bindPopup('Latitude: ' + e.latlng.lat + '
Longitude: ' + e.latlng.lng).openPopup();
 });
             

-        

-        Bài tiếp
       

-      

+      Bài tiếp
+
+

Made by ptduy14 with love ❤️

diff --git a/pages/ex-three.html b/pages/ex-three.html index a3cedea..732facb 100644 --- a/pages/ex-three.html +++ b/pages/ex-three.html @@ -14,8 +14,7 @@ -
-
MORE
+
MORE
@@ -57,7 +56,7 @@ Bài tiếp
-
+

Made by ptduy14 with love ❤️

diff --git a/pages/ex-two.html b/pages/ex-two.html index c01228f..affe4b5 100644 --- a/pages/ex-two.html +++ b/pages/ex-two.html @@ -4,7 +4,11 @@ Exemple Two - + -
-
MORE
-
-
-
-

- Tính và hiển thị khoảng cách từ hai điểm (dùng Popup hiển thị tại vị trí điểm cuối của Polyline): -

-
-
- 

+    
MORE

+    

+      

+      

+        

+          Tính và hiển thị khoảng cách từ hai điểm (dùng Popup hiển thị tại vị
+          trí điểm cuối của Polyline):
+        

+      

+      

+        

 var startPoint; 
 var endPoint;
 var marker;
@@ -48,12 +52,12 @@
   }
 })
             

-        

-        Bài trước
-        Bài tiếp
       

-      

+      Bài trước
+      Bài tiếp
+
+

Made by ptduy14 with love ❤️

@@ -78,12 +82,12 @@ '© OpenStreetMap', }).addTo(map); - var startPoint; + var startPoint; var endPoint; var marker; var polyline; - map.on('click', (e) => { + map.on("click", (e) => { if (!startPoint) { startPoint = e.latlng; marker = L.marker(startPoint).addTo(map); @@ -94,10 +98,9 @@ } if (startPoint && endPoint) { - polyline = L.polyline([startPoint, endPoint], {color: 'red'}).addTo(map); + polyline = L.polyline([startPoint, endPoint], { color: "red" }).addTo(map); } - }) - + }); diff --git a/style.css b/style.css index f95fb5d..2a1abd3 100644 --- a/style.css +++ b/style.css @@ -5,6 +5,10 @@ font-size: 20px; } +body { + overflow: hidden; +} + html{ background-color: #282A36; color: #F8F8F2; @@ -12,7 +16,7 @@ html{ #map { position: relative; - height: 90vh; + height: 93vh; width: 100%; } @@ -51,7 +55,7 @@ footer { .modal { position: absolute; - height: 90vh; + height: 93vh; width: 60%; z-index: 99999; top: 0;