Marker()功能介绍及用法详解

发布时间：2023-12-19 06:12:45

Marker()是Google Maps JavaScript API提供的一个构造函数，用于创建并添加标记（marker）到地图上。标记是地图上的一个可见的图形化标记，用于标识地图上的特定位置。

Marker()的用法如下：

1. 构造函数创建Marker对象：可以用new关键字和Marker()构造函数来创建一个新的Marker对象。需要传入一个对象作为参数，该对象包含初始化标记的位置（position）以及其他可选的参数。

2. 在地图上添加标记：使用Marker对象的setMap()方法，将标记添加到地图上。使用setMap(null)可以将标记从地图上移除。

下面是一个具体的使用示例：

<!DOCTYPE html>
<html>
<head>
  <title>Marker Example</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script>
    function initMap() {
      var myLatLng = {lat: -25.363, lng: 131.044};

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: myLatLng
      });

      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Hello World!'
      });
    }
  </script>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    initMap();
  </script>
</body>
</html>

上述示例中，通过引入Google Maps JavaScript API的脚本以及添加一个API key，创建一个地图并将其显示在id为"map"的div元素中。然后，创建一个Marker对象，并设置其位置为经纬度为-25.363, 131.044的点，并将标记添加到地图上。标记的标题设置为"Hello World!"。最后，在页面加载完毕时调用initMap()函数来初始化地图。

可以根据需要对Marker对象进行进一步的设置，比如修改标记的图标、改变标记的大小、添加信息窗口等等。详细的用法可以参考Google Maps JavaScript API的官方文档。