谷歌地图 - 标记( Markers)
在上一章中，我们学习了如何在Google地图中使用标记。 除了标记，我们还可以添加各种形状，如圆形，多边形，矩形，折线等。本章介绍如何使用Google地图提供的形状。
折线(Polylines)
由Google地图提供的折线可用于跟踪不同的路径。 您可以通过实例化类google.maps.Polyline将折线添加到地图中。 在实例化这个类时，我们必须指定折线属性的所需值，例如StrokeColor，StokeOpacity和strokeWeight。
我们可以通过将其对象传递给方法setMap(MapObject)来向地图添加折线。 我们可以通过将空值传递给SetMap（）方法来删除折线。
例子 (Example)
以下示例显示了一条折线，突出显示了德里，伦敦，纽约和北京之间的路径。
<!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>
它将产生以下输出 -
新页面打开Polygons
多边形用于突出显示州或国家的特定地理区域。 您可以通过实例化类google.maps.Polygon来创建所需的多边形。 在实例化时，我们必须为Polygon的属性指定所需的值，例如path，strokeColor，strokeOapacity，fillColor，fillOapacity等。
例子 (Example)
以下示例显示如何绘制多边形以突出显示Hyderabad，Nagpur和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>
它将产生以下输出 -
新页面打开矩形(Rectangles)
我们可以使用矩形使用矩形框突出显示特定区域或州的地理区域。 我们可以通过实例化类google.maps.Rectangle在地图上有一个矩形。 在实例化时，我们必须为矩形的属性指定所需的值，例如path，strokeColor，strokeOapacity，fillColor，fillOapacity，strokeWeight，bounds等。
例子 (Example)
以下示例显示如何使用矩形突出显示地图上的特定区域 -
<!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类来使用Circles来突出显示特定区域的地理区域或使用圆圈的状态。 在实例化时，我们必须为圆的属性指定所需的值，例如path，strokeColor，strokeOapacity，fillColor，fillOapacity，strokeWeight，radius等。
例子 (Example)
以下示例显示如何使用圆圈突出显示新德里周围的区域 -
<!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>
它将产生以下输出 -
新页面打开