在Google地图api v3上将多条折线连接到标记 [英] Multiple polyline to a marker on Google maps api v3

查看：87
本文介绍了在Google地图api v3上将多条折线连接到标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图将多条折线指向地图中的特定标记。

我能够将多段线绘制到标记上，但是当我尝试对相同的元素进行动画制作时，只有最后一条折线才起作用。下面的链接显示了我制作的地图。



http://jsbin.com/ihugur/ 1 /编辑



这也是代码： 

 < HTML> 
< head> 
< style type =text / css> 
 html {
 height：100％
} 
 body {
 height：100％; 
保证金：0; 
 padding：0 
} 
 #map_canvas {
 height：100％
} 
< / style> 
将脚本类型= 文本/ JavaScript的 SRC = https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&sensor=false&libraries=visualization >< /脚本> 
< script language =javascript> 
 var line; 
 var myLatlng = new google.maps.LatLng（41.7833，5.2167）; 
 var marker; 
函数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 } 
 $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' {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 = []; 
 
变种的MapOptions = {
变焦：2，
中心：myLatlng，
的mapTypeId：google.maps.MapTypeId.ROADMAP，
不透明度：0.2， 
 disableDefaultUI：true，
 draggable：false，
 styles：styles 
}; 
 
 map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
 
变种lineCoordinates = [
新google.maps.LatLng（53.215556，56.949219）
新google.maps.LatLng（75.797201，125.003906），
新谷歌.maps.LatLng（37.7833，144.9667），
新google.maps.LatLng（-24.797201，26.003906）
新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，
图标：[{
图标：lineSymbol，
偏移：'100％'，
 repeat：'30px'
}] 
}）; 
 line.setMap（map）; 
} //循环结束
 animate（）; 
 
} //初始化函数结束
 
函数animate（）{
 var count = 0; 
 offsetId = window.setInterval（function（）{
 count =（count + 1）％2000; 
 var icons = line.get（'icons'）; 
图标[ 0] .offset =（count / 2）+'％'; 
 line.set（'icons'，icons）; 
}，200）; 
} //结束动画功能
< / script> 
< / head> 
< body onLoad =initialize（）> 
< div id =map_canvasstyle =width：1000px; height：675px; margin-left：400px; margin-top：38px;>< / div> 
< / select> 
< / body> 
< / html>

任何人都可以帮我解决这个问题。
在此先感谢。

解决方案

创建一个数组来保存所有多段线： 

  var lines = [];

将您现有的行放在该数组上： 

  lines.push（line）;

通过它们更新图标。 

 函数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'）; 
图标[0] .offset =（count / 2）+'％'; 
 lines [i] .set（'图标'，图标）; 
} 
}，200）; 
} //结束动画函数

示例 $ b

代码段：



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： style：[{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），新增google.maps.LatLng（27.797201，-101.003906）]; var lineSymbol = {path：google.maps.SymbolPath.FORWARD_OPEN_ARROW}; for（i = 0; i 

  html {height：100％; width：100％;} body {height：100％;宽度：100％边距：0; padding：0} #map_canvas {height：100％; width：100％;}

< script src = https://maps.googleapis.com/maps/api/js\"></script><div id =map_canvasstyle =width：100％; height：100％;>< / div>


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.

解决方案

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地图api v3上将多条折线连接到标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆