Fatal编程技术网
  • javascript/
  • Javascript 多条谷歌地图多段线

Javascript 多条谷歌地图多段线

javascript google-maps google-maps-api-3

Javascript 多条谷歌地图多段线,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正试图使用这段代码来完成我所需要的工作，这就是在我的地图上有多个多段线起点和终点，并且能够单击起点标记来显示有关路线的文本 这个例子的问题是目的地只有一个lat/long，但是我需要为每个原点添加不同的目的地lat/long，以及为每个原点添加唯一的标记文本/标题。有人能告诉我怎么做吗 谢谢你的帮助 <html> <head> <style type="text/css"> html { height: 100%; width: 100%; } bo

我正试图使用这段代码来完成我所需要的工作，这就是在我的地图上有多个多段线起点和终点，并且能够单击起点标记来显示有关路线的文本

这个例子的问题是目的地只有一个lat/long，但是我需要为每个原点添加不同的目的地lat/long，以及为每个原点添加唯一的标记文本/标题。有人能告诉我怎么做吗

谢谢你的帮助

<html>
<head>
<style type="text/css">
html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width:  100%
  margin: 0;
  padding: 0
}
#map_canvas {
  height: 100%;
  width: 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 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: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.5,
  strokeWeight:1,
  strokeColor: '#000',
  geodesic: false,
  icons: [{
    icon: lineSymbol,
    offset: '100%',
    repeat: '60px'
  }]
});
 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
</script>
</head>
<body onLoad="initialize()">
    <div id="map_canvas" style="width: 100%; height: 100%; "></div>  
</select>   
</body>
</html>


html{
身高：100%；
宽度：100%；
}
身体{
身高：100%；
宽度：100%
保证金：0；
填充：0
}
#地图画布{
身高：100%；
宽度：100%；
}
var线；
var行=[]；
var mylatng=newgoogle.maps.LatLng（41.7833,5.2167）；
var标记；
函数初始化（）{
变量样式=[
{
“featureType”：“administration.country”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“功能类型”：“管理”，
“elementType”：“几何体”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“特色类型”：“景观”，
“造型师”：[
{“可见性”：“在”}，
{“颜色”：“#c0c0”}
]
},{
“功能类型”：“水”，
“造型师”：[
{“可见性”：“在”}，
{“颜色”：“#FFFFFF”}
]
},{
“特色类型”：“景观。人造”，
“造型师”：[
{“可见性”：“关闭”}，
{“颜色”：“#efffff”}
]
},{
“featureType”：“poi”，
“elementType”：“几何体”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“featureType”：“transit”，
“造型师”：[
{“可见性”：“关闭”}
]
}
];  
变量symbolOne={
strokeColor:“#F00”，
填充颜色：'#F00'，
不透明度：1
};
var域=[new google.maps.LatLng（11.258375.1374）]；
var标记=[]；
变量映射选项={
缩放：2，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP，
不透明度：0.2，
disableDefaultUI:true，
可拖动：错误，
样式：样式
};
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
变量行坐标=[
新的google.maps.LatLng（53.2155556,56.949219），
新的google.maps.LatLng（75.797201125.003906），
新的google.maps.LatLng（37.7833144.9667），
新的google.maps.LatLng（-24.797201,26.003906），
新google.maps.LatLng（27.797201，-101.003906）
];
变量lineSymbol={
路径：google.maps.SymbolPath.FORWARD\u OPEN\u箭头
};

对于（i=0；i而言，您的所有线路最终都位于同一目的地的原因如下：


path: [lineCoordinates[i], domain[0]],



因此，它们从不同的
线坐标[i]
开始，但在同一坐标
域[0]
结束，即11.2583、75.1374。您需要确定它们实际结束的位置，然后相应地编码。
谢谢，是的，这很有意义。问题是，我不知道如何相应地编码：）