通过Marker()在地图上添加标记点的连线效果实现

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

在地图上使用Marker()添加标记点的连线效果可以在地图上连接多个标记点，形成有线条的标记点集合。这个效果可以用于显示路线、连续点集或者其他需要标记点之间连线的场景。

下面是一个使用Google Maps JavaScript API实现标记点连线效果的例子。首先，需要在HTML文件中引入Google Maps JavaScript库和添加地图容器。

<!DOCTYPE html>
<html>
  <head>
    <title>Marker连线效果示例</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <script>
      var map;
      
      function initMap() {
        // 创建地图容器
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 39.9078, lng: 116.3976}, // 设定地图中心点
          zoom: 12 // 设定地图缩放级别
        });

        // 标记点的位置数组
        var locations = [
          {lat: 39.9078, lng: 116.3976}, // 北京
          {lat: 31.2243, lng: 121.4691}, // 上海
          {lat: 23.1291, lng: 113.2644}, // 广州
          {lat: 30.5728, lng: 104.0668} // 成都
        ];

        // 创建标记点和连线
        locations.forEach(function(location) {
          var marker = new google.maps.Marker({
            position: location,
            map: map
          });
        });

        var line = new google.maps.Polyline({ // 创建连线
          path: locations, // 连线的坐标数组
          geodesic: true,
          strokeColor: '#FF0000', // 连线颜色
          strokeOpacity: 1.0,
          strokeWeight: 2 // 连线宽度
        });

        line.setMap(map); // 显示连线
      }
    </script>
  </body>
</html>

在上述代码中，我们创建了一个包含四个标记点的locations数组，分别代表"北京"、"上海"、"广州"和"成都"的经纬度。然后，通过循环遍历locations数组，使用Marker()方法在地图上创建标记点，并将其添加到地图上。接着，使用Polyline()方法创建连线，并设置其颜色、透明度和宽度。最后，将连线添加到地图中显示。

在实际使用中，可以根据需求添加更多的标记点和调整连线的样式，从而实现不同的效果。该例子只是一个基本的样例，你可以根据自己的需求进行修改和扩展。