En el capítulo anterior, aprendimos cómo utilizar marcadores en Google Maps.Junto con los marcadores, también podemos añadir varias formas tales como círculos, polígonos, rectángulos, polilíneas, etc. En este capítulo se explica cómo utilizar las formas proporcionadas por Google Maps.
Polilíneas
Polilíneas, proporcionadas por Google Maps, son útiles para seguir caminos diferentes. Puede añadir polilíneas a un mapa instanciar la clasegoogle.maps.Polyline. Mientras instanciar esta clase, tenemos que especificar los valores necesarios de las propiedades de una polilínea como strokeColor, StokeOpacity y strokeWeight.
Podemos añadir una polilínea de un mapa al pasar su objeto con el métodosetMap (MapObject). Podemos eliminar la polilínea al pasar un valor nulo al método setMap ().
Ejemplo
El siguiente ejemplo muestra una polilínea destacando la ruta entre las ciudades de Delhi, Londres, Nueva York y Pekín.
<!DOCTYPE html>
<html>
<head>
<script src = "http://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>
Se producirá la siguiente salida -
Polígonos
Los polígonos se utilizan para destacar un área geográfica particular de un estado o un país. Usted puede crear un polígono deseado por crear instancias de la clase google.maps.Polygon. Mientras instancia, tenemos que especificar los valores deseados para las propiedades del polígono como camino, strokeColor, strokeOapacity, fillColor, fillOapacity, etc.
Ejemplo
El siguiente ejemplo muestra cómo dibujar un polígono para destacar las ciudades de Hyderabad, Nagpur y Aurangabad.
<!DOCTYPE html>
<html>
<head>
<script src = "http://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>
Se producirá la siguiente salida -
Rectángulos
Podemos utilizar rectángulos para resaltar el área geográfica de una región en particular o un estado utilizando una caja rectangular. Podemos tener un rectángulo en un mapa por crear instancias de la clase google.maps.Rectangle.Mientras instancia, tenemos que especificar los valores deseados para las propiedades del rectángulo como trayectoria, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, límites, etc.
Ejemplo
El siguiente ejemplo muestra cómo resaltar un área particular en un mapa mediante un rectángulo -
<!DOCTYPE html>
<html>
<head>
<script src = "http://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>
Esto le da la siguiente salida -
Círculos
Así como rectángulos, podemos utilizar círculos para resaltar el área geográfica de una región en particular o un estado usando un círculo por crear instancias de la clase google.maps.Circle. Mientras instancia, tenemos que especificar los valores que desee en las propiedades del círculo, como camino, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radio, etc.
Ejemplo
El siguiente ejemplo muestra cómo resaltar el área alrededor de Nueva Delhi utilizando un círculo -
<!DOCTYPE html>
<html>
<head>
<script src = "http://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>
Se producirá la siguiente salida -
No hay comentarios.:
Publicar un comentario