在Leaflet中，如何在几个点之间绘制折线

Question

问题：我有3个标记，我想在它们之间划一条线。我正在使用Leaflet。

代码：这是我绘制线条的代码，添加后只隐藏地图。

var cities = [
              {
                  city : 'City: Ittoqqortoormiit',
                  desc : 'Beginning of the expedition of Microsoft',
                  lat : 70.20,
                  long :  -23
              },
               {
                  city : 'City: Kangerlussuaq',
                  desc : 'End of the expedition of Microsoft',
                  lat : 67,
                  long :  -50.8
              },

              {
                  city : 'City: Kangerlussuaq',
                  desc : 'End of the expedition of Microsoft',
                  lat : 60,
                  long :  -45.8
              }
              
          ];


          var pointA = new L.LatLng(70.20, -23);
          var pointB = new L.LatLng(67, -50.8);
          var pointList = [pointA, pointB];

var firstpolyline = new L.polyline(pointList, {
        color: 'red',
        weight: 3,
        opacity: 0.5,
        smoothFactor: 1

});

firstpolyline.addTo(map);


          //Angular App Module and Controller
          var sampleApp = angular.module('mapsApp', []);
          sampleApp.controller('MapCtrl', function ($scope) {
          //We center the map in Greenland
              var mapOptions = {
                  zoom: 4,
                  center: new google.maps.LatLng(69,-26),
                  mapTypeId: google.maps.MapTypeId.TERRAIN
              }

              $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

              $scope.markers = [];
              
              var infoWindow = new google.maps.InfoWindow();
              
              var createMarker = function (info){
                  
                  var marker = new google.maps.Marker({
                      map: $scope.map,
                      position: new google.maps.LatLng(info.lat, info.long),
                      title: info.city
                  });
                  marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
                  
                  google.maps.event.addListener(marker, 'click', function(){
                      infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                      infoWindow.open($scope.map, marker);
                  });
                  
                  $scope.markers.push(marker);
                  
              }  
              
              for (i = 0; i < cities.length; i++){
                  createMarker(cities[i]);
              }

              $scope.openInfoWindow = function(e, selectedMarker){
                  e.preventDefault();
                  google.maps.event.trigger(selectedMarker, 'click');
              }

          });

#charts {
    width: 1550px;
}

.InsideContent{
    display:inline-block;
}
#curve_chart1{
  width:250px;
  float:left;
  width: 510px; 
  height: 310px
}  
#curve_chart2{
  width:250px;
  width: 510px; 
  height: 310px
} 

#curve_chart3{
  width:250px;
  float:right;
  width: 510px; 
  height: 310px
} 

​.clear {
    clear: both;
    display: none;
}​


a {
    text-decoration: none;
  }
#map{
    height:500px; 
    width:2000px; 
   
    }
#repeat{ 
     display: inline;
     }
#country_container { 
     width:800px; 
     margin: 0px 3px 3px 0px; 
     text-align: center; 
     width: 85px; 
     padding: 4px; 
     display: inline-table;  
     color: white; 
     background-color: black; 
     font-size: 12px; 
     cursor: pointer;
     border: 1px solid black; 
     border-radius:13px; 
     }
#country_container:hover { 
     box-shadow: 0px 0px 10px black;
     background-color: gray; 
     border: 1px solid gray; 
     cursor: pointer; 
     }
#names { 
     cursor: pointer; 
       }

.title-large:hover{
    outline-color: transparent;
}
.tile-large {
    display: block;
    float: left;
    margin: 5px;
    background-color: #EEE;
    box-shadow: 0px 0px 1px #FFC inset;
    position: relative;
    width: 310px;
    height: 310px;

}

.tile-wide {
    display: block;
    float: left;
    margin: 5px;
    background-color: #EEE;
    box-shadow: 0px 0px 1px #FFC inset;
    cursor: pointer;
    position: relative;
    width: 310px;
    height: 150px;


}

.horizontal-menu > li > a {
    position: relative;
    display: block;
    float: left;
    font-size: 1.4rem;
    color: inherit;
    background-color: inherit;
    padding: .625rem 1.625rem;
    line-height: 1.4rem;

.ol-transparent{
    outline color: transparent; 

}

.tile {
    display: block;
    float: left;
    margin: 5px;
    background-color: #EEE;
    box-shadow: 0px 0px 1px #FFC inset;
    position: relative;
    width: 150px;
    height: 150px;

}

.tile-small, .tile, .tile-square, .tile-wide, .tile-large, .tile-big, .tile-super {
    overflow: visible;

*{
    border-collapse: collapse;
}

body{
    font-family: sans-serif;



    font-size: 0.875em;
    line-height: 1.1;
    font-weight: 400;
    font-style: normal;
}

.horizontal-menu > li{
    display: block;
    float: left;
    color: inherit;
    background-color: inherit;
    position: relative;

}


ul,li, ol li{
    line-height: 1.25rem;
}

element.style{
    heigh: 28px;
    display: inline-block;
    margin-left: -20px;
    margin-right: 10px;
}
.horizontal-menu {
    display: block;
    width: 100%;
    color: #1d1d1d;
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none inside none;


}

img{
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}

ul, menu, dir{
    display: block;
    list-style-type: disc;


}

.app-bar .app-bar-element{
    line-height: 3.125rem;
    font-size: 1rem;
    cursor: pointer;
    color: inherit;
    display: block;
    float: left;
    position: relative;
    vertical-align: middle;
    height: 3.125rem;

}

<!DOCTYPE html>
<html ng-app="mapsApp">
<head lang="en">
  <meta charset="UTF-8">
	<link href="metro.css" rel="stylesheet">
	<script src="jquery.js"></script>
  <script src="metro.js"></script>
 
<title>This is the map of the expedition</title>
<link rel="stylesheet" href="css/maps.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript" src="js/maps.js"></script>



 <script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }"></script>

    <script type="text/javascript">
      google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it
      function drawChart() {
        //this is the first chart to visualize with the data
        var data1 = google.visualization.arrayToDataTable([
          ['Dates', 'distance'],
          ['01 april',  1000],
          ['02 april',  1170],
          ['03 april',  660],
          ['04 april',  1030]
        ]);
        var data2 = google.visualization.arrayToDataTable([
          ['Dates', 'distance'],
          ['01 april',  1000],
          ['02 april',  1170],
          ['03 april',  660],
          ['04 april',  1030]
        ]);

           var data3 = google.visualization.arrayToDataTable([
          ['Year', 'Heartrate', 'distance'],
          ['2004', 400, 1500],
          ['2005', 60, 1600],
          ['2006', 1120, 1700],
          ['2007',  540, 1800]
        ]);



         // Set chart options for teh first chart
        var options1 = {
          title: 'Heartrate vs days',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
         // Set chart options for the second chart
           var options2 = {
          title: 'Distance vs days',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        // Set chart options for the thirdchart
          var options3 = {
          title: 'Heart-rate vs distance vs days',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

       
        // Instantiate and draw our first chart, passing in some options.
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart1'));
        chart.draw(data1, options1);
        // Instantiate and draw our second chart, passing in some options.
        var chart2 = new google.visualization.LineChart(document.getElementById('curve_chart2'));
            chart2.draw(data2, options2);
        // Instantiate and draw our second chart, passing in some options.    
           var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart3'));
            chart3.draw(data3, options3);

        
      }
    </script>
</head>
<body>

<div ng-controller="MapCtrl">
    <div id="map"></div>
    <div id="repeat" ng-repeat="marker in markers | orderBy : 'title'">
         <a id="country_container" href="#" ng-click="openInfoWindow($event, marker)">
         <label id="names" >{{marker.title}}</label></a>
</div>
<div id="charts">
<div id="curve_chart1" class="InsideContent">left</div>
<div id="curve_chart2" class="InsideContent">Middle</div>
<div id="curve_chart3" class="InsideContent">right</div>
<div class="clear"></div> 

<div class="grid show-grid">

                        <div class="tile-group no-margin no-padding" style="width:100%">
                      
                            <div class="tile-large ol-transparent" data-role="tile"></div>
                            <div class="tile-wide ol-transparent" data-role="tile"></div>
                            
                            <div class="tile-wide ol-transparent" data-role="tile"></div>
                            
                       
                        </div>



    </div>

</body>
</html>

帮助任何人？谢谢！

enter image description here

Answer 1

您想要将传单L.Polyline添加到google.maps.Map个实例吗？那永远不会奏效。 Leaflet的L.Polyline将与Leaflet L.Map实例一起使用。如果您的google.maps.Map实例需要折线，则需要使用google.maps.Polyline。

• 参考：https://developers.google.com/maps/documentation/javascript/reference#Polyline
• 示例：https://developers.google.com/maps/documentation/javascript/examples/polyline-simple