目录

谷歌地图 - 标记( Markers)

我们可以在地图上绘制对象并将它们绑定到所需的纬度和经度。 这些称为叠加。 Google地图提供了各种叠加层,如下所示。

  • Markers
  • Polylines
  • Polygons
  • 圆形和矩形
  • 信息窗口
  • Symbols

要在地图上标记单个位置,Google地图会提供markers 。 这些标记使用标准符号,这些符号可以自定义。 本章介绍如何添加标记,以及如何自定义,动画和删除标记。

添加简单标记

您可以通过实例化标记类并使用latlng指定要标记的位置,在所需位置向地图添加一个简单标记,如下所示。

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});  

例子 (Example)

以下代码设置了海德拉巴市(印度)的标记。

<!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>

它产生以下输出 -

新页面打开

动画标记

向地图添加标记后,您可以进一步添加动画,例如bouncedrop 。 以下代码段显示了如何将跳动和拖放动画添加到标记。

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 
//To make the marker drop
animation:google.maps.Animation.Drop 

例子 (Example)

以下代码设置了海德拉巴市的标记,增加了动画效果 -

<!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来使这个图标可draggable:true

例子 (Example)

以下示例显示如何将标记自定义为所需图标 -

<!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,从而删除现有标记。

例子 (Example)

以下示例显示如何从地图中删除标记 -

<!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>

它产生以下输出 -

新页面打开
↑回到顶部↑
WIKI教程 @2018