Google地图API中的颜色变化Polyline属性 [英] Color variations Polyline property in Google maps API

问题描述

我有这样的要求，我需要在悉尼，墨尔本和阿德莱德之间画一条线，悉尼和阿德莱德之间的线应该是彩色的，而墨尔本和阿德莱德之间的界线应该是 。

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

  new google.maps.Polyline（{
}）; 
  

为了实现这个功能？

解决方案

为每行创建 google.maps.Polyline 对象，下面提供了简单折线页面：

函数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％;保证金：0;填充：0; } #map {height：100％;}

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

I have requirement such that I need to draw a line between Sydney, Melbourne and Adelaide and the line between Sydney and Adelaide should be dark in color and the line between Melbourne and Adelaide should be lighter.

Is it possible in current API to provide this functionality in a single object:

new google.maps.Polyline({
});

To achieve the functionality?

解决方案

Create google.maps.Polyline object per every line, below is provided the modified example from 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>

这篇关于Google地图API中的颜色变化Polyline属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！