使用Marker()在地图上显示不同样式的标记点

发布时间：2023-12-19 06:13:35

Marker()是Google Maps JavaScript API中一个用于在地图上显示标记点的类。它可以根据设定的位置、图标、颜色、标题等属性在地图上显示不同样式的标记点。下面是一个使用Marker()的例子，用于在地图上显示不同样式的标记点。

首先，我们需要创建一个包含Google地图的HTML页面，并加载Google Maps JavaScript API：

<!DOCTYPE html>
<html>
  <head>
    <title>Display Markers with Different Styles</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Display Markers with Different Styles</h1>
    <div id="map"></div>

    <script>
      var map;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 40.712775, lng: -74.005974},
          zoom: 12
        });

        // 创建一个图标
        var icon = {
          url: 'https://cdn.example.com/icon.png',
          scaledSize: new google.maps.Size(40, 40),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(20, 20)
        };

        // 创建一个红色的标记点
        var marker1 = new google.maps.Marker({
          position: {lat: 40.712775, lng: -74.005974},
          map: map,
          icon: icon,
          title: 'New York City',
          label: {
            text: 'Marker 1',
            color: 'white',
            fontWeight: 'bold'
          }
        });

        // 创建一个蓝色的标记点
        var marker2 = new google.maps.Marker({
          position: {lat: 40.735657, lng: -74.172366},
          map: map,
          icon: icon,
          title: 'Jersey City',
          label: {
            text: 'Marker 2',
            color: 'white',
            fontWeight: 'bold'
          }
        });

        // 创建一个绿色的标记点
        var marker3 = new google.maps.Marker({
          position: {lat: 40.740686, lng: -73.993120},
          map: map,
          icon: icon,
          title: 'Brooklyn',
          label: {
            text: 'Marker 3',
            color: 'white',
            fontWeight: 'bold'
          }
        });
      }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  </body>
</html>

在上面的例子中，我们首先在HTML文档中创建一个<div>元素，用于显示地图。然后使用JavaScript代码初始化地图，并指定地图的中心点和缩放级别。然后，我们使用new google.maps.Marker()来创建Marker对象，并设置属性如位置、图标、标题等。我们还可以使用label属性来设置标记点的标签文本和样式。

上面的例子创建了三个不同样式的标记点，并将它们添加到地图上。

请注意，在上面的代码中，YOUR_API_KEY需要替换为你自己的Google Maps JavaScript API密钥。你可以在Google Cloud控制台中创建一个API密钥，并替换到代码中。

通过使用Marker()类和设置不同的属性，我们可以在地图上显示不同样式的标记点。你可以根据自己的需求调整标记点的位置、图标、标签等属性，以满足你的需求。同时，你还可以根据自己的实际情况，进一步定制标记点的样式和功能。