Карты Google - Фигуры
В предыдущей главе мы узнали, как использовать маркеры в Google Maps. Наряду с маркерами мы также можем добавлять различные формы, такие как круги, многоугольники, прямоугольники, полилинии и т. Д. В этой главе объясняется, как использовать формы, предоставляемые Google Maps.
Полилинии
Полилинии, предоставляемые Google Maps, полезны для отслеживания различных путей. Вы можете добавить полилинии на карту, создав экземпляр классаgoogle.maps.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. При создании экземпляра мы должны указать желаемые значения свойствам 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>
Это дает вам следующий результат -
Круги
Так же, как прямоугольники, мы можем использовать круги, чтобы выделить географическую область определенного региона или штата, используя круг, создав экземпляр класса. google.maps.Circle. При создании экземпляра мы должны указать желаемые значения для свойств круга, таких как path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, радиус и т. Д.
пример
В следующем примере показано, как выделить область вокруг Нью-Дели с помощью круга.
<!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>
Он выдаст следующий результат -