在地图上使用Marker()实现自定义图标的标记点

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

在地图上使用Marker()方法实现自定义图标的标记点，可以根据自己的需求选择合适的图标来标记地点。以下是一个使用例子：

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Marker Example</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h3>Custom Marker Example</h3>
    <div id="map"></div>

    <script>
      function initMap() {
        // 创建一个地图对象，指定地图的中心和缩放级别
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 40.7127753, lng: -74.0059728},
          zoom: 12
        });

        // 自定义的图标
        var icon = {
          url: 'custom_marker.png',
          scaledSize: new google.maps.Size(50, 50), // 图标尺寸
          origin: new google.maps.Point(0, 0), // 图标原点
          anchor: new google.maps.Point(25, 50) // 图标锚点
        };

        // 创建一个标记点
        var marker = new google.maps.Marker({
          position: {lat: 40.7127753, lng: -74.0059728},
          map: map,
          icon: icon, // 使用自定义的图标
          title: 'New York City'
        });
      }
    </script>

    <!-- 加载Google Maps JavaScript API -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </body>
</html>

上述例子中实现了在地图上使用自定义图标的标记点。步骤如下：

1. 在<style>标签中设置#map的样式，以指定地图的高度和宽度。

2. 在<script>标签中编写JavaScript代码。

3. 在initMap()函数中创建地图对象，指定地图的中心和缩放级别。

4. 定义一个自定义的图标，通过url属性指定图标的路径，scaledSize属性指定图标的尺寸，origin属性指定图标的原点，anchor属性指定图标的锚点。

5. 创建一个标记点，通过position属性指定标记点的位置，map属性指定标记点所属的地图对象，icon属性指定标记点的图标，title属性指定标记点的标题。

6. 在<script>标签的末尾，加载Google Maps JavaScript API，并在URL中指定你自己的API密钥，以及指定在API加载完成后调用的回调函数initMap()。

该示例中使用了一个名为custom_marker.png的自定义图标来标记纽约市的位置。你可以自行替换该图标的路径，以及根据需要调整图标的尺寸、原点和锚点。

以上是使用Marker()实现自定义图标的标记点的使用例子。通过自定义图标，可以为标记点添加个性化的风格，并根据自己的需求自由选择合适的图标。