Google Maps 符号
除了标记、多边形、折线和其他几何形状，我们还可以在地图上添加预定义的矢量图像（符号）。本章说明如何使用 Google 地图提供的符号。
添加符号
Google 提供了各种可用于标记或折线的基于矢量的图像（符号）。就像其他叠加层一样，要在地图上绘制这些预定义符号，我们必须实例化它们各自的类。以下是 Google 提供的预定义符号列表及其类名-
Circle-google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) -google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) -google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) -google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (open) -google.maps.SymbolPath.CIRCLE
这些符号具有以下属性-path、fillColor、fillOpacity、scale、stokeColor、strokeOpacity 和 strokeWeight。
示例
下面的例子说明了如何绘制在谷歌地图的预定义码元。
<!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>
