Google Maps API中的颜色变化Polyline属性

时间:2015-12-06 04:50:00

标签: google-maps google-maps-api-3 google-maps-markers google-maps-api-2

我要求我需要在悉尼,墨尔本和阿德莱德之间划一条线,悉尼和阿德莱德之间的线路应该是黑暗,墨尔本和阿德莱德之间的线路应该是 打火机

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

new google.maps.Polyline({
});

实现功能?

2 个答案:

答案 0 :(得分:1)

单个折线具有一组属性。您可以为每个唯一的属性集使用单个google.maps.Polyline执行此操作,因此在您的示例中,有两条折线。

答案 1 :(得分: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>
&#13;
&#13;
&#13;