Multiple polyline to a marker on Google maps api v

2019-01-26 01:25发布

站内文章 / 前端开发
19 0 0

问题:

I am trying to direct multiple polylines to a particular marker in a map.

I am able to draw the polylines to the marker but when I try to animate the same only the last polyline is working. The link below shows the map I made.

http://jsbin.com/ihugur/1/edit

Also this is the code:

<html>
<head>
<style type="text/css">
html {
  height: 100%
}
body {
  height: 100%;
  margin: 0;
  padding: 0
}
#map_canvas {
  height: 100%
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&sensor=false&libraries=visualization"></script>
<script language="javascript">
 var line;
 var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
 var marker;
function initialize(){
var styles = [
  {
    "featureType": "administrative.country",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "on" },
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "on" },
      { "color": "#FFFFFF" }
    ]
  },{
    "featureType": "landscape.man_made",
    "stylers": [
      { "visibility": "off" },
      { "color": "#efffff" }
    ]
  },{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];  

var symbolOne = {
  strokeColor: '#F00',
  fillColor: '#F00',
  fillOpacity: 1
};

var domain = [new google.maps.LatLng(11.2583, 75.1374)];
var markers = [];

var mapOptions = {
  zoom:2,
  center: myLatlng, 
  mapTypeId: google.maps.MapTypeId.ROADMAP, 
  opacity: 0.2,
  disableDefaultUI: true,
  draggable: false,
  styles: styles
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var lineCoordinates = [
  new google.maps.LatLng(53.215556, 56.949219),
  new google.maps.LatLng(75.797201, 125.003906),
  new google.maps.LatLng(37.7833, 144.9667),
  new google.maps.LatLng(-24.797201, 26.003906),
  new google.maps.LatLng(27.797201, -101.003906)
];

var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW                  
};

for(i=0;i<lineCoordinates.length;i++){ 
  markers.push(new google.maps.Marker({
    position: lineCoordinates[i],
    map: map,
  }));

line = new google.maps.Polyline({
  path: [lineCoordinates[i], domain[0]],
  strokeOpacity: 0.8,
  strokeWeight:2,
  strokeColor: '#f00',
  geodesic: true,
  icons: [{
    icon: lineSymbol,
    offset: '100%',
    repeat: '30px'
  }]
});
 line.setMap(map);
} //end of for loop
animate();

} //end of initialize function

function animate(){
  var count = 0;
  offsetId = window.setInterval(function(){
    count = (count + 1) % 2000;
    var icons = line.get('icons');
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
  }, 200);
}// end of animate function
</script>
</head>
<body onLoad="initialize()">
    <div id="map_canvas" style="width: 1000px; height: 675px; margin-left: 400px; margin-top: 38px;"></div>  
</select>   
</body>
</html>

Could anyone help me fixing this problem. Thanks in advance.

回答1:

Make an array to hold all your polylines:

 var lines = [];

push your existing line(s) on that array:

 lines.push(line);

Process through them updating the icons.

function animate(){
  var count = 0;
  offsetId = window.setInterval(function(){
    count = (count + 1) % 2000;
    for (var i=0; i<lines.length; i++) {
     var icons = lines[i].get('icons');
     icons[0].offset = (count / 2) + '%';
     lines[i].set('icons', icons);
    }
  }, 200);
}// end of animate function

example

code snippet:

var line;
var lines = [];
var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
var marker;

function initialize() {
    var styles = [{
      "featureType": "administrative.country",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "administrative",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "landscape",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#C0C0C0"
      }]
    }, {
      "featureType": "water",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#FFFFFF"
      }]
    }, {
      "featureType": "landscape.man_made",
      "stylers": [{
        "visibility": "off"
      }, {
        "color": "#efffff"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "transit",
      "stylers": [{
        "visibility": "off"
      }]
    }];

    var symbolOne = {
      strokeColor: '#F00',
      fillColor: '#F00',
      fillOpacity: 1
    };

    var domain = [new google.maps.LatLng(11.2583, 75.1374)];
    var markers = [];

    var mapOptions = {
      zoom: 1,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      opacity: 0.2,
      disableDefaultUI: true,
      draggable: false,
      styles: styles
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    var lineCoordinates = [
      new google.maps.LatLng(53.215556, 56.949219),
      new google.maps.LatLng(75.797201, 125.003906),
      new google.maps.LatLng(37.7833, 144.9667),
      new google.maps.LatLng(-24.797201, 26.003906),
      new google.maps.LatLng(27.797201, -101.003906)
    ];

    var lineSymbol = {
      path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
    };

    for (i = 0; i < lineCoordinates.length; i++) {
      markers.push(new google.maps.Marker({
        position: lineCoordinates[i],
        map: map
      }));

      line = new google.maps.Polyline({
        path: [lineCoordinates[i], domain[0]],
        strokeOpacity: 0.8,
        strokeWeight: 2,
        strokeColor: '#f00',
        geodesic: true,
        icons: [{
          icon: lineSymbol,
          offset: '100%',
          repeat: '30px'
        }]
      });
      line.setMap(map);
      lines.push(line);
    } //end of for loop
    // alert(lines.length);
    animate();

  } //end of initialize function

function animate() {
    var count = 0;
    offsetId = window.setInterval(function() {
      count = (count + 1) % 2000;
      for (var i = 0; i < lines.length; i++) {
        var icons = lines[i].get('icons');
        icons[0].offset = (count / 2) + '%';
        lines[i].set('icons', icons);
      }
    }, 200);
  } // end of animate function
google.maps.event.addDomListener(window, 'load', initialize);
html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100% margin: 0;
  padding: 0
}
#map_canvas {
  height: 100%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width: 100%; height: 100%; "></div>



标签： google-maps-api-3 google-polyline
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~