谷歌地图 - 符号
除了标记、多边形、折线和其他几何形状之外,我们还可以在地图上添加预定义的矢量图像(符号)。本章介绍如何使用 Google 地图提供的符号。
添加符号
Google 提供了各种可用于标记或多段线的基于矢量的图像(符号)。就像其他叠加层一样,要在地图上绘制这些预定义符号,我们必须实例化它们各自的类。下面给出的是 Google 提供的预定义符号及其类名称的列表 -
圆- google.maps.SymbolPath.CIRCLE
向后指向箭头(关闭) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
向前指向箭头(关闭) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW
向前指向箭头(打开) - google.maps.SymbolPath.CIRCLE
向后指向箭头(打开) - google.maps.SymbolPath.CIRCLE
这些符号具有以下属性:路径、填充颜色、填充不透明度、比例、斯托克颜色、描边不透明度和描边重量。
例子
以下示例演示了如何在 Google 地图上绘制预定义符号。
<!DOCTYPE html> <html> <head> <script src = "https://maps.googleapis.com/maps/api/js"></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:5 } var map = new google.maps.Map(document.getElementById("sample"),mapOptions); var marker = new google.maps.Marker({ position: map.getCenter(), icon: { path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, scale: 5, strokeWeight:2, strokeColor:"#B40404" }, draggable:true, map: map, }); } </script> </head> <body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body> </html>
它产生以下输出 -
动画符号
就像标记一样,您也可以向符号添加弹跳和下降等动画。
例子
以下示例展示了如何使用符号作为地图上的标记并向其添加动画 -
<!DOCTYPE html> <html> <head> <script src = "https://maps.googleapis.com/maps/api/js"></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:5 } var map = new google.maps.Map(document.getElementById("sample"),mapOptions); var marker = new google.maps.Marker({ position: map.getCenter(), icon: { path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, scale: 5, strokeWeight:2, strokeColor:"#B40404" }, animation:google.maps.Animation.DROP, draggable:true, map: map }); } </script> </head> <body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body> </html>
它产生以下输出 -