通过Marker()在地图上添加标记点的大小效果

发布时间：2023-12-19 06:15:48

在使用地图的开发中，往往需要在地图上添加一些标记点，以标识出地图上的特定位置。为了使标记点更加突出和易于识别，可以通过设置标记点的大小来达到效果。在一些地图API中，比如Google Maps API，可以通过Marker()函数来实现。

下面是一个使用Google Maps API在地图上添加标记点并设置大小的示例：

首先，需要引入Google Maps API的JavaScript库，并创建一个地图实例。例如：

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

    <script>
      function initMap() {
        var myLatLng = {lat: -34.397, lng: 150.644};

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

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!',
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'red',
            fillOpacity: 1,
            strokeColor: 'black',
            strokeOpacity: 1,
            strokeWeight: 1,
            scale: 10
          }
        });
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </body>
</html>

在上面的示例中，首先引入了Google Maps API的JavaScript库，并创建了一个地图实例。然后，通过设置position参数来指定标记点的位置，map参数指定将该标记点添加到哪个地图上，title参数指定标记点的标题。

最重要的是通过icon参数来设置标记点的样式。在icon参数中，设置了path参数为google.maps.SymbolPath.CIRCLE，表示使用圆形作为标记点的形状。其他参数如fillColor、fillOpacity、strokeColor、strokeOpacity、strokeWeight用于设置填充颜色、填充透明度、边框颜色、边框透明度、边框粗细等属性。其中，scale参数用于设置标记点的大小，它的值可以是任意数字，代表缩放比例。通过设置不同大小的scale值，可以实现不同大小的标记点效果。

在完成上述设置后，通过调用new google.maps.Marker()创建一个Marker对象，将其添加到地图上。

最后，需要将显示地图的#map元素的高度和宽度设置为合适的值，然后引入Google Maps API的脚本，并传入自己的API密钥（替换YOUR_API_KEY），同时指定初始化地图的回调函数为initMap()。

通过上述示例，可以在地图上添加一个指定大小的标记点，使其更加突出和易于识别。根据具体需求，可以通过调整scale参数的值，来设置不同大小的标记点。