Question

我尝试为我的折线显示infoWindow，事实上，我按照执行此任务的所有步骤但仍然没有出现infoWindow .. 在这里，我有几个标记，我在其中创建了路径：

的Javascript

 <style>
        #map
        {
            height:100%;
            width:100%;
        }
  </style>
  <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBI1yC7eX6bOcbLruLZ224K5X4N-rwznjE&callback=initMap">
        </script>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

        <script>

            var markers = [

            //1 Qazvin Takestan   
            {
            "title": 'Qazvin',
            "lat": '36.2737',
            "lng": '49.9982',
            "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
            }, 

            {
            "title": 'Takestan_dest',  
            "lat": '36.0721',
            "lng": '49.7013',
            "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
            }, 


            //1 Qazvin Takestan kooh 36.066553, 49.638426
            {
            "title": 'Qazvin',
            "lat": '36.2737',
            "lng": '49.9982',
            "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
            }, 

            {
            "title": 'Takestan Kooh_dest',  
            "lat": '36.066553',
            "lng": '49.638426',
            "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان کوه</b>"
            }, 


            //2 Takestan Razan 
            {
            "title": 'Takestan_src',  
            "lat": '36.0721',
            "lng": '49.7013',
            "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
            },

            {
            "title": 'Razan',
            "lat": '35.3914',
            "lng": '49.0337',
            "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: رزن</b>"
            },


            //3 Takestan Abhar 
            {
            "title": 'Takestan_src',  
            "lat": '36.0721',
            "lng": '49.7013',
            "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
            },

            {
            "title": 'Abhar', 
            "lat": '36.1525',
            "lng": '49.2385',
            "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: ابهر</b>"
            },

            //4 Abhar zanjan 36.1525° N, 49.2385° E
            {
            "title": 'Takestan_src',  
            "lat": '36.1525',
            "lng": '49.2385',
            "description":"<a href='edit-stations.php?temp_id=2018080250'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b></a>"
            },

            {
            "title": 'Zanjan', 
            "lat": '36.6830',
            "lng": '48.5087',
            "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زنجان</b>"
            },

            //5 Qazvin Ziaran 36.1185° N, 50.5265    
            {
            "title": 'Qazvin',
            "lat": '36.2737',
            "lng": '49.9982',
            "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
            }, 

            {
            "title": 'Ziaran',  
            "lat": '36.1185',
            "lng": '50.5265',
            "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
            }, 

            //6 Ziaran karaj 35.8400° N, 50.9391° E   
            {
            "title": 'Ziaran',  
            "lat": '36.1185',
            "lng": '50.5265',
            "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
            },  

            {
            "title": 'karaj',  
            "lat": '35.8400',
            "lng": '50.9391',
            "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: کرج</b>"
            },

            //7 Qazvin Loshan 36.6294° N, 49.5140° E  
            {
            "title": 'Qazvin',
            "lat": '36.2737',
            "lng": '49.9982',
            "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
            },  

            {
            "title": 'Loshan',  
            "lat": '36.6294',
            "lng": '49.5140',
            "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: لوشان</b>"
            },

            //8 Qazvin BoeenZahra 35.7677° N, 50.0573° E 
            {
            "title": 'Qazvin',
            "lat": '36.2737',
            "lng": '49.9982',
           "description": "<a href='edit-stations.php?temp_id=2018082145'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b></a>"
            },  

            {
            "title": 'BoeenZahra',  
            "lat": '35.7677',
            "lng": '50.0573',
            "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: بویین زهرا</b>"
            }





];
        var infowindow2;
        var poly;
        var map;
        var marker;
        var path;
        var vertices;
        var polylines = []; 
        var flightPlanCoordinates;
        var zz = 0;   
        flightPlanCoordinates =[
           [
            {lat: 36.2737, lng: 49.9982},
            {lat: 35.7677, lng: 50.0573}
            ],
            [
            {lat: 36.2737, lng: 49.9982},
            {lat:36.543726,lng: 49.574846},
            {lat: 36.6294, lng: 49.5140}
            ]
        ];

        function initMap() {           
        var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID 
        };

         // Define the symbol, using one of the predefined paths ('CIRCLE')
        // supplied by the Google Maps JavaScript API.
        var lineSymbol = {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 8,
          strokeColor: '#393'
        };

        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        var infoWindow = new google.maps.InfoWindow();

        //multi polylines
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();

        for (i = 0; i < markers.length; i++) {
        var data = markers[i];
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        lat_lng.push(myLatlng);
        marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: data.title
        });
        latlngbounds.extend(marker.position);
        (function(marker, data) {
        google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent(data.description);
        infoWindow.open(map, marker);
        });
        })(marker, data);
        }

        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);

        //Initialize the Direction Service
        var service = new google.maps.DirectionsService();
         var hh =0;   
         //Loop and Draw Path Route between the Points on MAP
        for (var i = 0; i < lat_lng.length; i++) {

        if ((i + 1) < lat_lng.length) {
        var src = lat_lng[i];
        var des = lat_lng[i + 1];
        i = i+1;
        service.route({
        origin: src,
        destination: des,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          //Initialize the Path Array
          path = new google.maps.MVCArray();



            //Set the Path Stroke Color
            poly = new google.maps.Polyline({
            //path: path,
            //path: flightPlanCoordinates[hh],
            icons: [{
            icon: lineSymbol,
            offset: '100%'
          }],
            map: map,
            //strokeColor: '#ec2a04'
            strokeWeight: 3.5,
            strokeColor: '#38ff45'
          });

        hh++;    

          poly.setPath(path);
          //poly.setPath(flightPlanCoordinates[0]);
          //poly.push(flightPlanCoordinates);

          polylines.push(poly);

          //polylines[0].setOptions({strokeColor: 'blue'}); 

          //var routeIndex = indexOfRequest(result);

          for (var i = 0, len = result.routes[0].overview_path.length ; i < len; i++) {
            path.push(result.routes[0].overview_path[i]);
          }

           animateCircle(poly);
        }
        });

        }
       //polylines[routeIndex].setPath(result.routes[0].overview_path);

        }
            createInfoWindow(poly, 'polyinfo...test'); //I tried polylines too
            google.maps.event.addDomListener(window, 'load', initialize);
        }

         function createInfoWindow(poly, content) {

    google.maps.event.addListener(poly, 'click', function(event) {
        // infowindow.content = content;
        infowindow2.setContent(content);

        // infowindow.position = event.latLng;
        infowindow2.setPosition(event.latLng);
        infowindow2.open(map);
    });
}   

        // Use the DOM setInterval() function to change the offset of the symbol
        // at fixed intervals.
        function animateCircle(line) {
          var count = 0;
          window.setInterval(function() {
            count = (count + 1) % 200;
            var icons = line.get('icons');
            icons[0].offset = (count / 2) + '%';
            line.set('icons', icons);
            }, 20);
        } 

    function changeRootProperty(pathID,pathStatus)
    {
        if((pathStatus%2) == 0)
            {
                polylines[pathID].setOptions({strokeColor: 'red'});
                document.getElementById("path"+pathID).innerHTML = "<span class='label label-danger'>غیرفعال</span>";
            }
        else
            {
                polylines[pathID].setOptions({strokeColor: '#38ff45'});
                document.getElementById("path"+pathID).innerHTML = "<span class='label label-success'>فعال</span>";
            } 
    } 

  </script>

的index.html

<div id="map" style='width:100%;height:340px;'>

</div>

我尝试了很多，但我仍有问题，当我点击标记时，会出现信息窗口，但对于折线不会。

Answer 1

使用发布的代码，我收到javascript错误：Uncaught TypeError: Cannot read property '__e3_' of undefined，因为DirectionsService是异步的，而您在其回调函数之外调用createInfoWindow(poly, 'polyinfo...test');（poly之前变量已创建。）

你想在回调函数中调用它：

function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      //Initialize the Path Array
      path = new google.maps.MVCArray();
      //Set the Path Stroke Color
      poly = new google.maps.Polyline({
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }],
        map: map,
        //strokeColor: '#ec2a04'
        strokeWeight: 3.5,
        strokeColor: '#38ff45'
      });
      hh++;
      poly.setPath(path);
      polylines.push(poly);
      for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
        path.push(result.routes[0].overview_path[i]);
      }
      animateCircle(poly);
      createInfoWindow(poly, 'polyinfo...test');  // <== call it inside the callback function
    }
  });

一旦我这样做，我收到一个新错误：Uncaught TypeError: Cannot read property 'setContent' of undefined因为变量infowindow2永远不会初始化，请将其添加到initMap函数中：

infowindow2 = new google.maps.InfoWindow();

proof of concept fiddle

代码段

＆＃13;

var markers = [

  //1 Qazvin Takestan   
  {
    "title": 'Qazvin',
    "lat": '36.2737',
    "lng": '49.9982',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
  },

  {
    "title": 'Takestan_dest',
    "lat": '36.0721',
    "lng": '49.7013',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
  },


  //1 Qazvin Takestan kooh 36.066553, 49.638426
  {
    "title": 'Qazvin',
    "lat": '36.2737',
    "lng": '49.9982',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
  },

  {
    "title": 'Takestan Kooh_dest',
    "lat": '36.066553',
    "lng": '49.638426',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان کوه</b>"
  },


  //2 Takestan Razan 
  {
    "title": 'Takestan_src',
    "lat": '36.0721',
    "lng": '49.7013',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
  },

  {
    "title": 'Razan',
    "lat": '35.3914',
    "lng": '49.0337',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: رزن</b>"
  },


  //3 Takestan Abhar 
  {
    "title": 'Takestan_src',
    "lat": '36.0721',
    "lng": '49.7013',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
  },

  {
    "title": 'Abhar',
    "lat": '36.1525',
    "lng": '49.2385',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: ابهر</b>"
  },

  //4 Abhar zanjan 36.1525° N, 49.2385° E
  {
    "title": 'Takestan_src',
    "lat": '36.1525',
    "lng": '49.2385',
    "description": "<a href='edit-stations.php?temp_id=2018080250'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b></a>"
  },

  {
    "title": 'Zanjan',
    "lat": '36.6830',
    "lng": '48.5087',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زنجان</b>"
  },

  //5 Qazvin Ziaran 36.1185° N, 50.5265    
  {
    "title": 'Qazvin',
    "lat": '36.2737',
    "lng": '49.9982',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
  },

  {
    "title": 'Ziaran',
    "lat": '36.1185',
    "lng": '50.5265',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
  },

  //6 Ziaran karaj 35.8400° N, 50.9391° E   
  {
    "title": 'Ziaran',
    "lat": '36.1185',
    "lng": '50.5265',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
  },

  {
    "title": 'karaj',
    "lat": '35.8400',
    "lng": '50.9391',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: کرج</b>"
  },

  //7 Qazvin Loshan 36.6294° N, 49.5140° E  
  {
    "title": 'Qazvin',
    "lat": '36.2737',
    "lng": '49.9982',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
  },

  {
    "title": 'Loshan',
    "lat": '36.6294',
    "lng": '49.5140',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: لوشان</b>"
  },

  //8 Qazvin BoeenZahra 35.7677° N, 50.0573° E 
  {
    "title": 'Qazvin',
    "lat": '36.2737',
    "lng": '49.9982',
    "description": "<a href='edit-stations.php?temp_id=2018082145'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b></a>"
  },

  {
    "title": 'BoeenZahra',
    "lat": '35.7677',
    "lng": '50.0573',
    "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: بویین زهرا</b>"
  }
];
var infowindow2;
var poly;
var map;
var marker;
var path;
var vertices;
var polylines = [];
var flightPlanCoordinates;
var zz = 0;
flightPlanCoordinates = [
  [{
      lat: 36.2737,
      lng: 49.9982
    },
    {
      lat: 35.7677,
      lng: 50.0573
    }
  ],
  [{
      lat: 36.2737,
      lng: 49.9982
    },
    {
      lat: 36.543726,
      lng: 49.574846
    },
    {
      lat: 36.6294,
      lng: 49.5140
    }
  ]
];

function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var infoWindow = new google.maps.InfoWindow();
  infowindow2 = new google.maps.InfoWindow();

  //multi polylines
  var lat_lng = new Array();
  var latlngbounds = new google.maps.LatLngBounds();

  for (i = 0; i < markers.length; i++) {
    var data = markers[i];
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);
    marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: data.title
    });
    latlngbounds.extend(marker.position);
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent(data.description);
        infoWindow.open(map, marker);
      });
    })(marker, data);
  }

  map.setCenter(latlngbounds.getCenter());
  map.fitBounds(latlngbounds);

  //Initialize the Direction Service
  var service = new google.maps.DirectionsService();
  var hh = 0;
  //Loop and Draw Path Route between the Points on MAP
  for (var i = 0; i < lat_lng.length; i++) {

    if ((i + 1) < lat_lng.length) {
      var src = lat_lng[i];
      var des = lat_lng[i + 1];
      i = i + 1;
      service.route({
        origin: src,
        destination: des,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          //Initialize the Path Array
          path = new google.maps.MVCArray();
          //Set the Path Stroke Color
          poly = new google.maps.Polyline({
            icons: [{
              icon: lineSymbol,
              offset: '100%'
            }],
            map: map,
            strokeWeight: 3.5,
            strokeColor: '#38ff45'
          });
          hh++;
          poly.setPath(path);
          polylines.push(poly);
          for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
            path.push(result.routes[0].overview_path[i]);
          }

          animateCircle(poly);
          createInfoWindow(poly, 'polyinfo...test');
        }
      });
    }
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

function createInfoWindow(poly, content) {
  google.maps.event.addListener(poly, 'click', function(event) {
    infowindow2.setContent(content);
    infowindow2.setPosition(event.latLng);
    infowindow2.open(map);
  });
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  var count = 0;
  window.setInterval(function() {
    count = (count + 1) % 200;
    var icons = line.get('icons');
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
  }, 20);
}

function changeRootProperty(pathID, pathStatus) {
  if ((pathStatus % 2) == 0) {
    polylines[pathID].setOptions({
      strokeColor: 'red'
    });
    document.getElementById("path" + pathID).innerHTML = "<span class='label label-danger'>غیرفعال</span>";
  } else {
    polylines[pathID].setOptions({
      strokeColor: '#38ff45'
    });
    document.getElementById("path" + pathID).innerHTML = "<span class='label label-success'>فعال</span>";
  }
}

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: white;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id='map'></div>

＆＃13;

Answer 2

正如@geocodezip所提到的那样，当我第一次尝试运行时，我也遇到了Cannot read property '__e3_' of undefined错误，并最终得到了一些消失。我不确定是否也要为infowindows设置动画或仅仅是在点击每条折线时调用它们，所以下面的代码更复杂，需要只是简单地在折线的位置打开信息窗。

我还修改了为infowindow生成内容的代码，以便显示当前路径的详细信息，这可能是预期的结果。

<!doctype html>
<html>
    <head>
        <title>Polyline - animated infowindow &amp; poly click</title>
        <meta charset='utf-8' />
        <style>
            #map{
                height:100vh;
                width:100%;
            }
            h2{
                font-size:1rem;
                margin:0 0 0.25rem 0;
                text-decoration:underline;
            }
            p,p *{
                margin:0 auto;
                font-size:0.95rem!important;
                font-family:calibri,verdana,arial!important;
                padding:0!important;
                box-sizing:border-box;
            }
            p + div{
                font-size:0.75rem;
                font-family:calibri,verdana,arial;
                color:gray;
            }
        </style>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyBI1yC7eX6bOcbLruLZ224K5X4N-rwznjE&callback=initMap'></script>
        <script>

            var markers = [

                //1 Qazvin Takestan   
                {
                "title": 'Qazvin',
                "lat": '36.2737',
                "lng": '49.9982',
                "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
                },             
                {
                "title": 'Takestan_dest',  
                "lat": '36.0721',
                "lng": '49.7013',
                "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
                }, 


                //1 Qazvin Takestan kooh 36.066553, 49.638426
                {
                "title": 'Qazvin',
                "lat": '36.2737',
                "lng": '49.9982',
                "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
                },         
                {
                "title": 'Takestan Kooh_dest',  
                "lat": '36.066553',
                "lng": '49.638426',
                "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان کوه</b>"
                }, 


                //2 Takestan Razan 
                {
                "title": 'Takestan_src',  
                "lat": '36.0721',
                "lng": '49.7013',
                "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
                },
                {
                "title": 'Razan',
                "lat": '35.3914',
                "lng": '49.0337',
                "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: رزن</b>"
                },


                //3 Takestan Abhar 
                {
                "title": 'Takestan_src',  
                "lat": '36.0721',
                "lng": '49.7013',
                "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b>"
                },
                {
                "title": 'Abhar', 
                "lat": '36.1525',
                "lng": '49.2385',
                "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: ابهر</b>"
                },

                //4 Abhar zanjan 36.1525° N, 49.2385° E
                {
                "title": 'Takestan_src',  
                "lat": '36.1525',
                "lng": '49.2385',
                "description":"<a href='edit-stations.php?temp_id=2018080250'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: تاکستان</b></a>"
                },  
                {
                "title": 'Zanjan', 
                "lat": '36.6830',
                "lng": '48.5087',
                "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زنجان</b>"
                },

                //5 Qazvin Ziaran 36.1185° N, 50.5265    
                {
                "title": 'Qazvin',
                "lat": '36.2737',
                "lng": '49.9982',
                "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
                },         
                {
                "title": 'Ziaran',  
                "lat": '36.1185',
                "lng": '50.5265',
                "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
                }, 

                //6 Ziaran karaj 35.8400° N, 50.9391° E   
                {
                "title": 'Ziaran',  
                "lat": '36.1185',
                "lng": '50.5265',
                "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: زیاران</b>"
                },         
                {
                "title": 'karaj',  
                "lat": '35.8400',
                "lng": '50.9391',
                "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: کرج</b>"
                },

                //7 Qazvin Loshan 36.6294° N, 49.5140° E  
                {
                "title": 'Qazvin',
                "lat": '36.2737',
                "lng": '49.9982',
                "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b>"
                },     
                {
                "title": 'Loshan',  
                "lat": '36.6294',
                "lng": '49.5140',
                "description":"<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: لوشان</b>"
                },

                //8 Qazvin BoeenZahra 35.7677° N, 50.0573° E 
                {
                "title": 'Qazvin',
                "lat": '36.2737',
                "lng": '49.9982',
                "description": "<a href='edit-stations.php?temp_id=2018082145'><b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: قزوین</b></a>"
                },         
                {
                "title": 'BoeenZahra',  
                "lat": '35.7677',
                "lng": '50.0573',
                "description": "<b style='padding-right:20px;font-family:tahoma;'>نام ایستگاه: بویین زهرا</b>"
                }
            ];
        </script>
        <script>
            var infoWindow;
            var poly;
            var map;
            var marker;
            var path;
            var polylines=[];

            var args=getArgs();
            var animate_circles=args.hasOwnProperty('circles') && args.circles=='false' ? false : true;
            var animate_infowindows=args.hasOwnProperty('animate') && args.animate=='true' ? true : false;
            var enable_click=args.hasOwnProperty('click') && args.click=='false' ? false : true;


            function initMap() {           
                var mapOptions = {
                    center: new google.maps.LatLng( markers[0].lat, markers[0].lng ),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.HYBRID 
                };
                var lineSymbol = {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 5,
                    strokeColor: '#393'
                };
                map = new google.maps.Map( document.getElementById("map"), mapOptions );



                //multi polylines
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();

                for( i = 0; i < markers.length; i++ ) {
                    var data = markers[i];
                    var myLatlng = new google.maps.LatLng( data.lat, data.lng );
                        lat_lng.push( myLatlng );

                    marker = new google.maps.Marker({
                        position:myLatlng,
                        map:map,
                        title:data.title
                    });

                    latlngbounds.extend( marker.position );
                }
                map.setCenter( latlngbounds.getCenter() );
                map.fitBounds( latlngbounds );

                var service = new google.maps.DirectionsService();



                for( var i = 0; i < lat_lng.length; i++ ) {
                    if ( ( i + 1 ) < lat_lng.length ) {

                        var source = lat_lng[i];
                        var destination = lat_lng[i + 1];
                        var title=markers[ i ].title +' to ' + markers[ i+1 ].title;
                        var description=markers[ i ].description;

                        /* create the infowindow and set the contents */
                        var infoWindow = new google.maps.InfoWindow();
                            infoWindow.setMap( null );
                            infoWindow.setContent( 
                                [ 
                                    '<h2>'+title+'</h2>',
                                    '<p>'+description+'</p>',
                                    '<div>',
                                    'lat:'+markers[i].lat,
                                    ', ',
                                    'lng:'+markers[i].lng,
                                    '</div>'
                                ].join( '' )
                            );

                        i++;


                        /*********************/
                        /*
                            route config
                        */
                        var options={
                            origin: source,
                            destination: destination,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING                        
                        };
                        var callback=function( result, status ) {
                            if( status == google.maps.DirectionsStatus.OK ) {
                                path = new google.maps.MVCArray();

                                var poly = new google.maps.Polyline({
                                    icons: [{
                                        icon: lineSymbol,
                                        offset: '100%'
                                    }],
                                    map: map,
                                    strokeWeight: 3.5,
                                    strokeColor: '#38ff45',
                                    iwin:this /* infowindow - referenced in click event handler and animateCircle */
                                });


                                poly.setPath( path );
                                polylines.push( poly );

                                for( var i = 0; i < result.routes[0].overview_path.length; i++ ) {
                                    path.push( result.routes[0].overview_path[i] );
                                }


                                if( enable_click ){
                                    /* To simply open the infowindow by clicking on the polyline */
                                    google.maps.event.addListener( poly, 'click', function( event ){
                                        /* choose a location - arbitrarily this is approx 1/2 way of path */
                                        var length = this.getLength();
                                        var mid = Math.round( length / 2 );
                                        var pos = this.getAt( mid );
                                        var win = poly.get('iwin');

                                        /* set the infowindow at selected location */
                                        win.setPosition( { lat:pos.lat(), lng:pos.lng() } );

                                        /* open/close infowindow */
                                        openwin.call( this, win, map );

                                        /* change polyline colour */
                                        editpoly.call( this, poly );
                                        /*
                                            bound explicitly to the currently defined path
                                            so we can access it's properties
                                        */
                                    }.bind( path ) );
                                }


                                if( animate_circles ){
                                    animateCircle( poly, path );
                                }
                            }//end if
                        };//end callback

                        /* invoke the route request */
                        service.route( options, callback.bind( infoWindow ) );

                        /*********************/


                    }//close if

                }//close for loop
            }//end initMap



            function editpoly( poly ){
                poly.strokeColor = poly.strokeColor=='#38ff45' ? '#ff0000' : '#38ff45';
            }
            function openwin( win,map ){
                win.getMap()!==null && win.getMap()!=='undefined' ? win.close() : win.open( map )
            }




            // Use the DOM setInterval() function to change the offset of the symbol
            // at fixed intervals.

            // Note: this really thumps the processor after time

            function animateCircle( line, obj ) {
                var count = 0;
                /* 
                    if infowindow is to be animated, 
                    get a reference to the appropriate 
                    infowindow
                */
                if( animate_infowindows ){
                    var iwin=line.get('iwin');
                        iwin.open( map );

                    var i=0;
                    var x=0;
                    var pos;
                }

                window.setInterval( function() {
                    count = ( count + 1 ) % 200;

                    if( animate_infowindows ){
                        /* 
                            calculate the approximate percentage along path
                            to then find the lat/lng from the path at that
                            position
                        */
                        i = ( ( i + 1 ) % 200 );
                        x = Math.round( i / 2 / 100 * obj.getLength() );

                        pos=obj.getAt( x );
                        this.setPosition( { lat:pos.lat(), lng:pos.lng() } );
                    }


                    var icons = line.get('icons');
                        icons[0].offset = ( count / 2 ) + '%';
                    line.set( 'icons', icons );
                }.bind( iwin ), 20 );
            }


            /* 
                get querystring from url and 
                create object with parameters 
                in name/value pairs
            */
            function getArgs() {
                var a = {};
                var p = location.search.substring(1).split("&");
                for(var i=0; i < p.length;i++) {
                    var x = p[i].indexOf('=');
                    if( x == -1 ) continue;
                    a[ p[ i ].substring( 0, x ) ] = unescape( p[ i ].substring( x + 1 ) );
                }
                return a;
            }
        </script>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

通过更改地址栏中的网址，您可以启用/禁用信息窗口的动画或启用/禁用poly click事件

单击每条折线将打开它自己的信息窗口，因为每条线路都是自己分配的。内容源自原始markers数据。

得到一点点狂躁并重击处理器甚至不仅仅是简单的动画圆圈。每个infowindow沿着路径行进 - 我无法将其完全绑定到圆圈唉。

Google地图中每条折线的infoWindow不会使用javascript显示

2 个答案: