Google Maps 标记
我们可以在地图上绘制对象并将它们绑定到所需的纬度和经度。这些被称为覆盖。 Google 地图提供了如下所示的各种叠加层。
Markers
Polylines
Polygons
Circle and rectangle
Info window
Symbols
为了在地图上标记单个位置，Google 地图提供了
标记。这些标记使用标准符号，并且可以自定义这些符号。本章介绍了如何添加标记，以及如何自定义、设置动画和删除它们。
添加一个简单的标记
您可以通过实例化标记类并使用 latlng 指定要标记的位置，将简单标记添加到地图的所需位置，如下所示。
var marker = new google.maps.Marker({
position: new google.maps.LatLng(19.373341, 78.662109),
map: map,
});
示例
以下代码在城市海得拉巴（印度）上设置标记。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:7
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.088291, 78.442383),
map: map,
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
动画标记
在地图上添加标记后，您可以进一步添加动画，例如
bounce 和
drop。以下代码片段展示了如何向标记添加弹跳和放下动画。
//To make the marker bounce`
animation:google.maps.Animation.BOUNCE
//To make the marker drop
animation:google.maps.Animation.Drop
示例
以下代码在城市海得拉巴上设置标记并添加动画效果-
<!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.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
自定义标记
您可以使用自己的图标代替 Google 地图提供的默认图标。只需将图标设置为
icon:'ICON PATH'。您可以通过设置
draggable:true 使该图标可拖动。
示例
接下来的考试ple 展示了如何将标记自定义为所需的图标-
<!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.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
移除标记
您可以通过使用
marker.setMap() 方法将标记设置为 null 来删除现有标记。
示例
以下示例显示如何从地图中删除标记-
<!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.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
marker.setMap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
