如何在常规HTML,CSS中绘制线条(如谷歌地图)

在常规的HTML和CSS中，可以使用SVG（可缩放矢量图形）来绘制线条。SVG是一种基于XML的图像格式，可以在网页中创建复杂的图形和图标。

以下是一个简单的示例，展示了如何在HTML和CSS中绘制一条线：

<!DOCTYPE html>
<html>
<head><style>
  .line {
    stroke: black;
    stroke-width: 2;
  }
</style>
</head>
<body>

<svg width="200" height="200">
  <line class="line" x1="0" y1="0" x2="200" y2="200" />
</svg>

</body>
</html>

在这个示例中，我们使用了SVG元素<svg>来定义一个200x200像素的画布。然后，我们使用SVG的<line>元素来绘制一条线，该线的起点坐标为(0,0)，终点坐标为(200,200)。我们使用CSS类.line来定义线条的样式，包括颜色和宽度。

这个示例仅仅是一个简单的起点，你可以使用SVG来绘制更复杂的图形和图标。如果你需要在谷歌地图上绘制线条，可以使用谷歌地图API提供的Polyline功能。这是一个基于谷歌地图的API，可以让你在地图上绘制线条、多边形等复杂图形。

以下是一个使用谷歌地图API绘制线条的示例：

<!DOCTYPE html>
<html>
<head><script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script><style>
  #map {
    height: 400px;
    width: 100%;
  }
</style>
</head>
<body>

<div id="map"></div><script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: -28, lng: 137}
    });

    var flightPlanCoordinates = [
      {lat: -34.397, lng: 150.644},
      {lat: -18.142, lng: 178.431},
      {lat: -28.222, lng: 175.222}
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    flightPath.setMap(map);
  }
</script>

</body>
</html>

在这个示例中，我们使用了谷歌地图API的<script>标签来加载谷歌地图API。然后，我们在页面中创建了一个地图容器<div>，并使用CSS设置了地图的大小和样式。接下来，我们使用谷歌地图API的Polyline类来绘制一条线，该线的坐标由一个数组flightPlanCoordinates定义。最后，我们将这条线添加到地图上。

请注意，这个示例需要一个谷歌地图API密钥，你需要在谷歌地图API控制台中申请一个密钥，并将其替换为YOUR_API_KEY。