在上一章中,我们学习了如何在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等。
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: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>