Google 地图 API 中的颜色变化折线属性

Posted 2023-03-28

【中文标题】Google 地图 API 中的颜色变化折线属性

【英文标题】：Color variations Polyline property in Google maps API

【发布时间】：2016-03-10 21:52:21

【问题描述】：

我有要求，我需要在悉尼、墨尔本和阿德莱德之间画一条线，悉尼和阿德莱德之间的线应该是深色，墨尔本和阿德莱德之间的线应该是 >打火机。

当前的 API 是否可以在单个对象中提供此功能：

new google.maps.Polyline(
);

要实现功能？

【参考方案1】：

一种选择是为每行创建google.maps.Polyline 对象，下面提供了来自Simple Polylines page 的修改示例：

function initMap() 
  var map = new google.maps.Map(document.getElementById('map'), 
    zoom: 5,
    center: lat: -32.9340105, lng: 128.2698231,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  );

  var flightPlanCoordinates = [
    lat: -33.877024, lng: 151.227963,
    lat: -37.816567, lng: 144.961489,
    lat: -34.930054, lng: 138.593065
  ];
  var flightPath = new google.maps.Polyline(
    path: flightPlanCoordinates.slice(0,2),
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  );

   var flightPath2 = new google.maps.Polyline(
    path: flightPlanCoordinates.slice(1,3),
    geodesic: true,
    strokeColor: '#FFCC00',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  );

html, body 
        height: 100%;
        margin: 0;
        padding: 0;
      
#map 
        height: 100%;

 <div id="map"></div>
 <script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

【参考方案2】：

单个折线具有一组属性。您可以为每个独特的属性集使用单个 google.maps.Polyline 来完成此操作，因此在您的示例中为两条折线。