Google Maps - Hình dạng
Trong chương trước, chúng ta đã học cách sử dụng các điểm đánh dấu trong Google Maps. Cùng với các điểm đánh dấu, chúng tôi cũng có thể thêm các hình dạng khác nhau như hình tròn, đa giác, hình chữ nhật, đa đường, v.v. Chương này giải thích cách sử dụng các hình được cung cấp bởi Google Maps.
Polylines
Các đường đa giác, do Google Maps cung cấp, rất hữu ích để theo dõi các con đường khác nhau. Bạn có thể thêm polylines vào bản đồ bằng cách khởi tạo lớpgoogle.maps.Polyline. Trong khi khởi tạo lớp này, chúng ta phải chỉ định các giá trị cần thiết của các thuộc tính của một đường đa tuyến như StrokeColor, StokeOpacity và strokeWeight.
Chúng ta có thể thêm một polyline vào bản đồ bằng cách chuyển đối tượng của nó vào phương thức setMap(MapObject). Chúng ta có thể xóa polyline bằng cách chuyển một giá trị null vào phương thức SetMap ().
Thí dụ
Ví dụ sau đây cho thấy một đường polyline đánh dấu con đường giữa các thành phố Delhi, London, New York và Bắc Kinh.
<!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>Nó sẽ tạo ra kết quả sau:
Đa giác
Đa giác được sử dụng để đánh dấu một khu vực địa lý cụ thể của một tiểu bang hoặc một quốc gia. Bạn có thể tạo một đa giác mong muốn bằng cách khởi tạo lớpgoogle.maps.Polygon. Trong khi khởi tạo, chúng ta phải chỉ định các giá trị mong muốn cho các thuộc tính của Polygon như path, strokeColor, strokeOapacity, fillColor, fillOapacity, v.v.
Thí dụ
Ví dụ sau đây cho thấy cách vẽ một đa giác để làm nổi bật các thành phố Hyderabad, Nagpur và Aurangabad.
<!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>Nó sẽ tạo ra kết quả sau:
Hình chữ nhật
Chúng ta có thể sử dụng hình chữ nhật để làm nổi bật khu vực địa lý của một vùng cụ thể hoặc một tiểu bang bằng cách sử dụng hình hộp chữ nhật. Chúng ta có thể có một hình chữ nhật trên bản đồ bằng cách khởi tạo lớpgoogle.maps.Rectangle. Trong khi khởi tạo, chúng ta phải chỉ định các giá trị mong muốn cho các thuộc tính của hình chữ nhật như path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, v.v.
Thí dụ
Ví dụ sau đây cho thấy cách đánh dấu một khu vực cụ thể trên bản đồ bằng hình chữ nhật -
<!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>Điều này cung cấp cho bạn kết quả sau:
Vòng kết nối
Cũng giống như hình chữ nhật, chúng ta có thể sử dụng Vòng kết nối để đánh dấu khu vực địa lý của một vùng hoặc một tiểu bang cụ thể bằng cách sử dụng hình tròn bằng cách khởi tạo lớp google.maps.Circle. Trong khi khởi tạo, chúng ta phải chỉ định các giá trị mong muốn cho các thuộc tính của hình tròn như path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, v.v.
Thí dụ
Ví dụ sau đây cho thấy cách làm nổi bật khu vực xung quanh New Delhi bằng hình tròn:
<!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>Nó sẽ tạo ra kết quả sau: