LeafletJS - เครื่องหมาย
ในการทำเครื่องหมายตำแหน่งเดียวบนแผนที่แผ่นพับจะให้เครื่องหมาย เครื่องหมายเหล่านี้ใช้สัญลักษณ์มาตรฐานและสัญลักษณ์เหล่านี้สามารถปรับแต่งได้ ในบทนี้เราจะดูวิธีการเพิ่มเครื่องหมายและวิธีปรับแต่งทำให้เคลื่อนไหวและลบออก
การเพิ่มเครื่องหมายอย่างง่าย
หากต้องการเพิ่มเครื่องหมายลงในแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง -
Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)
Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ
Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.
Step 4 - สร้างไฟล์ Marker เรียนโดยผ่านก latlng วัตถุแทนตำแหน่งที่จะทำเครื่องหมายดังแสดงด้านล่าง
// Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);Step 5 - เพิ่มวัตถุเครื่องหมายที่สร้างขึ้นในขั้นตอนก่อนหน้าลงในแผนที่โดยใช้ไฟล์ addTo() วิธีการของ Marker ชั้นเรียน.
// Adding marker to the map
marker.addTo(map);ตัวอย่าง
รหัสต่อไปนี้กำหนดเครื่องหมายบนเมืองที่ชื่อไฮเดอราบัด (อินเดีย)
<!DOCTYPE html>
<html>
<head>
<title>Leaflet sample</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width:900px; height:580px"></div>
<script>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Creating a marker
var marker = L.marker([17.385044, 78.486671]);
// Adding marker to the map
marker.addTo(map);
</script>
</body>
</html>สร้างผลลัพธ์ต่อไปนี้ -
การเชื่อมป๊อปอัปเข้ากับ Marker
ในการผูกป๊อปอัปง่ายๆที่แสดงข้อความกับเครื่องหมายให้ทำตามขั้นตอนด้านล่าง -
Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)
Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ
Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.
Step 4 - สร้างไฟล์ Marker เรียนโดยผ่านก latlng วัตถุแทนตำแหน่งที่จะทำเครื่องหมาย
Step 5 - แนบป๊อปอัปเข้ากับเครื่องหมายโดยใช้ bindPopup() ดังแสดงด้านล่าง
// Adding pop-up to the marker
marker.bindPopup('Hi Welcome to Tutorialspoint').openPopup();Step 6 - สุดท้ายเพิ่มไฟล์ Marker วัตถุที่สร้างขึ้นในขั้นตอนก่อนหน้าไปยังแผนที่โดยใช้ addTo() วิธีการของ Marker ชั้นเรียน.
ตัวอย่าง
รหัสต่อไปนี้ตั้งค่าเครื่องหมายบนเมืองไฮเดอราบาด (อินเดีย) และเพิ่มป๊อปอัปลงไป
<!DOCTYPE html>
<html>
<head>
<title>Binding pop-Ups to marker</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width:900px; height:580px"></div>
<script>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 15
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
var marker = L.marker([17.438139, 78.395830]); // Creating a Marker
// Adding popup to the marker
marker.bindPopup('This is Tutorialspoint').openPopup();
marker.addTo(map); // Adding marker to the map
</script>
</body>
</html>สร้างผลลัพธ์ต่อไปนี้
ตัวเลือกเครื่องหมาย
ในขณะที่สร้างเครื่องหมายคุณยังสามารถส่งไฟล์ marker optionsตัวแปรนอกเหนือจากวัตถุ latlang เมื่อใช้ตัวแปรนี้คุณสามารถตั้งค่าให้กับตัวเลือกต่างๆของเครื่องหมายเช่น icon, dragable, keyboard, title, alt, zInsexOffset, opacity, riseOnHover, riseOffset, pane, dragable เป็นต้น
ในการสร้างแผนที่โดยใช้ตัวเลือกแผนที่คุณต้องทำตามขั้นตอนด้านล่าง -
Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)
Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ
Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.
Step 4 - สร้างตัวแปรสำหรับ markerOptions และระบุค่าให้กับตัวเลือกที่ต้องการ
สร้างไฟล์ markerOptions วัตถุ (สร้างขึ้นเช่นเดียวกับตัวอักษร) และตั้งค่าสำหรับตัวเลือก iconUrl และ iconSize.
// Options for the marker
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true
}Step 5 - สร้างไฟล์ Marker เรียนโดยผ่านก latlng วัตถุแทนตำแหน่งที่จะทำเครื่องหมายและอ็อบเจ็กต์อ็อพชันที่สร้างในขั้นตอนก่อนหน้า
// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);Step 6 - สุดท้ายเพิ่มไฟล์ Marker วัตถุที่สร้างขึ้นในขั้นตอนก่อนหน้าไปยังแผนที่โดยใช้ addTo() วิธีการของ Marker ชั้นเรียน.
ตัวอย่าง
รหัสต่อไปนี้กำหนดเครื่องหมายบนเมืองไฮเดอราบาด (อินเดีย) เครื่องหมายนี้สามารถคลิกได้ลากได้ด้วยชื่อเรื่องMyLocation.
<html>
<head>
<title>Marker Options Example</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width:900px; height:580px"></div>
<script>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Creating a Marker
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true
}
// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);
// Adding marker to the map
marker.addTo(map);
</script>
</body>
</html>สร้างผลลัพธ์ต่อไปนี้
ไอคอนเครื่องหมายกำหนดเอง
แทนที่จะเป็นไอคอนเริ่มต้นที่ไลบรารี Leaflet คุณสามารถเพิ่มไอคอนของคุณเองได้ คุณสามารถใช้ขั้นตอนต่อไปนี้เพื่อเพิ่มไอคอนแบบกำหนดเองลงในแผนที่แทนค่าเริ่มต้น
Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)
Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ
Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.
Step 4 - สร้างตัวแปรสำหรับ markerOptions และระบุค่าให้กับตัวเลือกที่ต้องการ -
iconUrl - ตามค่าของตัวเลือกนี้คุณต้องส่งไฟล์ String วัตถุที่ระบุเส้นทางของภาพที่คุณต้องการใช้เป็นไอคอน
iconSize - เมื่อใช้ตัวเลือกนี้คุณสามารถระบุขนาดของไอคอนได้
Note - นอกจากนี้คุณยังสามารถตั้งค่าให้กับตัวเลือกอื่น ๆ เช่น iconSize, shadowSize, iconAnchor, shadowAnchor และ popupAnchor
สร้างไอคอนที่กำหนดเองโดยใช้ L.icon() โดยส่งผ่านตัวแปรตัวเลือกด้านบนตามที่แสดงด้านล่าง
// Icon options
var iconOptions = {
iconUrl: 'logo.png',
iconSize: [50, 50]
}
// Creating a custom icon
var customIcon = L.icon(iconOptions);Step 5- สร้างตัวแปรสำหรับ markerOptions และระบุค่าให้กับตัวเลือกที่ต้องการ นอกจากนี้ให้ระบุไอคอนโดยส่งผ่านตัวแปรไอคอนที่สร้างขึ้นในขั้นตอนก่อนหน้าเป็นค่า
// Options for the marker
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true,
icon: customIcon
}Step 6 - สร้างไฟล์ Marker เรียนโดยผ่านก latlng วัตถุที่แสดงตำแหน่งที่จะทำเครื่องหมายและอ็อบเจ็กต์อ็อพชันที่สร้างขึ้นในขั้นตอนก่อนหน้า
// Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);Step 7 - สุดท้ายเพิ่มไฟล์ Marker วัตถุที่สร้างขึ้นในขั้นตอนก่อนหน้าไปยังแผนที่โดยใช้ addTo() วิธีการของ Marker ชั้นเรียน.
ตัวอย่าง
รหัสต่อไปนี้กำหนดเครื่องหมายบนตำแหน่งของ Tutorialspoint ที่นี่เรากำลังใช้โลโก้ของ Tutorialspoint แทนเครื่องหมายเริ่มต้น
<!DOCTYPE html>
<html>
<head>
<title>Marker Custom Icons Example</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width:900px; height:580px"></div>
<script>
// Creating map options
var mapOptions = {
center: [17.438139, 78.395830],
zoom: 10
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Icon options
var iconOptions = {
iconUrl: 'logo.png',
iconSize: [50, 50]
}
// Creating a custom icon
var customIcon = L.icon(iconOptions);
// Creating Marker Options
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true,
icon: customIcon
}
// Creating a Marker
var marker = L.marker([17.438139, 78.395830], markerOptions);
// Adding popup to the marker
marker.bindPopup('Hi welcome to Tutorialspoint').openPopup();
// Adding marker to the map
marker.addTo(map);
</script>
</body>
</html>สร้างผลลัพธ์ต่อไปนี้
