Google Maps 形状
在上一章中，我们学习了如何在 Google 地图中使用标记。除了标记，我们还可以添加各种形状，例如圆形、多边形、矩形、折线等。本章介绍如何使用 Google 地图提供的形状。
折线
由 Google 地图提供的折线可用于跟踪不同的路径。您可以通过实例化
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、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>
