Google Maps - รูปร่าง
ในบทที่แล้วเราได้เรียนรู้วิธีใช้เครื่องหมายใน Google Maps นอกจากเครื่องหมายแล้วเรายังสามารถเพิ่มรูปทรงต่างๆเช่นวงกลมรูปหลายเหลี่ยมสี่เหลี่ยมโพลีไลน์เป็นต้นในบทนี้จะอธิบายถึงวิธีการใช้รูปทรงที่ Google Maps มีให้
โพลีลีน
Polylines ซึ่งจัดทำโดย Google Maps มีประโยชน์ในการติดตามเส้นทางต่างๆ คุณสามารถเพิ่มโพลีไลน์ลงในแผนที่ได้โดยสร้างอินสแตนซ์ของคลาสgoogle.maps.Polyline. ในขณะที่สร้างอินสแตนซ์คลาสนี้เราต้องระบุค่าที่ต้องการของคุณสมบัติของ polyline เช่น StrokeColor, StokeOpacity และ strokeWeight
เราสามารถเพิ่มเส้นตรงลงในแผนที่ได้โดยส่งวัตถุไปยังเมธอด setMap(MapObject). เราสามารถลบโพลีไลน์ได้โดยส่งค่าว่างไปยังเมธอด SetMap ()
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงเส้นหลายเส้นที่เน้นเส้นทางระหว่างเมืองเดลีลอนดอนนิวยอร์กและปักกิ่ง
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:3,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var tourplan = new google.maps.Polyline({
path:[
new google.maps.LatLng(28.613939, 77.209021),
new google.maps.LatLng(51.507351, -0.127758),
new google.maps.LatLng(40.712784, -74.005941),
new google.maps.LatLng(28.213545, 94.868713)
],
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2
});
tourplan.setMap(map);
//to remove plylines
//tourplan.setmap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
รูปหลายเหลี่ยม
รูปหลายเหลี่ยมใช้เพื่อเน้นพื้นที่ทางภูมิศาสตร์เฉพาะของรัฐหรือประเทศ คุณสามารถสร้างรูปหลายเหลี่ยมที่ต้องการได้โดยสร้างอินสแตนซ์ของคลาสgoogle.maps.Polygon. ในขณะที่สร้างอินสแตนซ์เราต้องระบุค่าที่ต้องการให้กับคุณสมบัติของรูปหลายเหลี่ยมเช่น path, strokeColor, strokeOapacity, fillColor, fillOapacity เป็นต้น
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงวิธีการวาดรูปหลายเหลี่ยมเพื่อเน้นเมืองไฮเดอราบาดนาคปุระและออรังกาบัด
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip = [
new google.maps.LatLng(17.385044, 78.486671),
new google.maps.LatLng(19.696888, 75.322451),
new google.maps.LatLng(21.056296, 79.057803),
new google.maps.LatLng(17.385044, 78.486671)
];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
สี่เหลี่ยม
เราสามารถใช้รูปสี่เหลี่ยมเพื่อเน้นพื้นที่ทางภูมิศาสตร์ของพื้นที่ใดภูมิภาคหนึ่งหรือรัฐโดยใช้กล่องสี่เหลี่ยม เราสามารถมีสี่เหลี่ยมผืนผ้าบนแผนที่ได้โดยการสร้างอินสแตนซ์ของคลาสgoogle.maps.Rectangle. ในขณะที่สร้างอินสแตนซ์เราต้องระบุค่าที่ต้องการให้กับคุณสมบัติของสี่เหลี่ยมผืนผ้าเช่น path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds เป็นต้น
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงวิธีการเน้นพื้นที่เฉพาะบนแผนที่โดยใช้สี่เหลี่ยมผืนผ้า -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myrectangle = new google.maps.Rectangle({
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4,
map:map,
bounds:new google.maps.LatLngBounds(
new google.maps.LatLng(17.342761, 78.552432),
new google.maps.LatLng(16.396553, 80.727725)
)
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
แวดวง
เช่นเดียวกับรูปสี่เหลี่ยมเราสามารถใช้ Circles เพื่อเน้นพื้นที่ทางภูมิศาสตร์ของพื้นที่ใดภูมิภาคหนึ่งหรือรัฐโดยใช้วงกลมโดยการสร้างอินสแตนซ์ของชั้นเรียน google.maps.Circle. ในขณะที่สร้างอินสแตนซ์เราต้องระบุค่าที่ต้องการให้กับคุณสมบัติของวงกลมเช่น path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius เป็นต้น
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงวิธีการเน้นพื้นที่รอบนิวเดลีโดยใช้วงกลม -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(28.613939,77.209021),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:new google.maps.LatLng(28.613939,77.209021),
radius:150600,
strokeColor:"#B40404",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#B40404",
fillOpacity:0.6
});
myCity.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -