通过折线连接标记组

本文介绍了通过折线连接标记组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两组标记：pos和dax？
是否可以使用谷歌的函数Polyline连接两组标记？
第一组：pos1，pos2，pos3，pos4。
第二次gropup：dax1，dax2。

页面上的标记每10秒刷新一次。 >我将非常感谢任何帮助。

 <！DOCTYPE html> 
< html> 
< head> 
< title> TODO提供标题< / title> 
< meta charset =UTF-8> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js>< / script> 
< script src =https://maps.googleapis.com/maps/api/js>< / script> 
< script> 
 var centerLat; 
 var centerLng; 
 var mapOfSalons; 
 var markers = []; 
 
函数ajax（）{
 var ajaxArray = []; 
 ajaxArray [0] = {lat：50.22，lng：19.22，text：pos1}; 
 ajaxArray [1] = {lat：49.00，lng：19.88，text：pos2}; 
 ajaxArray [2] = {lat：49.40，lng：21.22，text：pos3}; 
 ajaxArray [3] = {lat：49.90，lng：21.66，text：pos4}; 
 
 ajaxArray [0] .lat = Math.random（）; 
 ajaxArray [2] .lat = Math.random（）; 
 
返回ajaxArray; 
} 
 
 
函数ajax2（）{
 var ajaxArray2 = []; 
 ajaxArray2 [0] = {lat：20.22，lng：19.22，text：dax1}; 
 ajaxArray2 [1] = {lat：20.00，lng：24.88，text：dax2}; 
 
 
 ajaxArray2 [0] .lat = Math.random（）+ 20; 
返回ajaxArray2; 
 
 
 $ b $（document）.ready（function（）{
 onStart（）; 
}）; 
 
 
函数clearOverlays（）{
 for（var i = 0; i< markers.length; i ++）{
 markers [i] .setMap（null ）; 
} 
 markers.length = 0; 
} 
 
 
函数onStart（）{
 centerLat = 50.22; 
 centerLng = 21.22; 
 
 var mapProp = {
 center：new google.maps.LatLng（centerLat，centerLng），
 zoom：8，
 mapTypeId：google.maps.MapTypeId。 ROADMAP 
}; 
 
 mapOfSalons = new google.maps.Map（document.getElementById（googleMap），mapProp）; 
 initialize（）; 
} 
 
 
 
函数drwaUserRoad（数据，颜色）{
 
 
 polly = new google.maps.Polyline {
 strokeColor：color，
 strokeOpacity：1.0，
 strokeWeight：3 
}）; 
 polly.setMap（mapOfSalons）; 
 
 for（i = 0; i< data.length; ++ i）{
 var marker = new google.maps.Marker（{
 position：new google。 maps.LatLng（data [i] .lat，data [i] .lng），
 map：mapOfSalons，
 title：data [i] .text 
}）; 
 markers.push（marker）; 
 
 
 
函数initialize（）{
 clearOverlays（）; 
 var data = ajax（）; 
 var data2 = ajax2（）; 
 drwaUserRoad（数据，'＃000000'）; 
 drwaUserRoad（data2，'＃FF00CC'）; 
 setTimeout（initialize，10000）; 
} 
< / script> 
 
< / head> 
< body style =margin：0 auto;> 
< div id =googleMapstyle =width：100％; height：100vh;>< / div> 
< / body> 
< / html>

I have two groups of markers: pos and dax?is it possible to connect markers in two groups using google's function Polyline ?First group : pos1, pos2, pos3, pos4.Second gropup: dax1, dax2.

The markers on the page are refreshing per 10sec.

I will be very grateful for any help.

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    var centerLat;
    var centerLng;
    var mapOfSalons;
    var markers = [];

    function ajax() {
    var ajaxArray = [];
         ajaxArray[0] = { "lat": "50.22", "lng": "19.22", "text": "pos1"};
         ajaxArray[1] = { "lat": "49.00", "lng": "19.88", "text": "pos2"};
         ajaxArray[2] = { "lat": "49.40", "lng": "21.22", "text": "pos3"};
         ajaxArray[3] = { "lat": "49.90", "lng": "21.66", "text": "pos4"};

        ajaxArray[0].lat = Math.random();
        ajaxArray[2].lat = Math.random();

    return ajaxArray;
    }


 function ajax2() {
    var ajaxArray2 = [];
         ajaxArray2[0] = { "lat": "20.22", "lng": "19.22", "text": "dax1"};
         ajaxArray2[1] = { "lat": "20.00", "lng": "24.88", "text": "dax2"};


    ajaxArray2[0].lat = Math.random() + 20;
    return ajaxArray2;
    }


    $( document ).ready(function() {
        onStart();
    });


    function clearOverlays() {
        for (var i = 0; i < markers.length; i++ ) {
          markers[i].setMap(null);
        }
        markers.length = 0;
    }


    function onStart() {
            centerLat = 50.22;
            centerLng = 21.22;

        var mapProp = {
            center:new google.maps.LatLng(centerLat, centerLng),
            zoom: 8,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        mapOfSalons = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        initialize();
    }



    function drwaUserRoad(data, color) {


            polly = new google.maps.Polyline({
                strokeColor: color,
                strokeOpacity: 1.0,
                strokeWeight: 3
            });
            polly.setMap(mapOfSalons);    

            for(i = 0; i < data.length; ++i) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data[i].lat, data[i].lng),
                    map: mapOfSalons,
                    title: data[i].text
                });
                markers.push(marker);
            }
    }

    function initialize() {
    clearOverlays();
        var data = ajax();
    var data2 = ajax2();
    drwaUserRoad(data, '#000000');
    drwaUserRoad(data2, '#FF00CC');
    setTimeout(initialize, 10000);
    }
</script>

    </head>
    <body style="margin: 0 auto;">
        <div id="googleMap" style="width:100%;height:100vh;"></div>
    </body>
</html>

link to jsfiddle example

解决方案

Yes, it is possible.

code snippet:

var centerLat;
var centerLng;
var mapOfSalons;
var markers = [];
var polly = new google.maps.Polyline({
  strokeColor: '#000000',
  strokeOpacity: 1.0,
  strokeWeight: 3
});

var polly2 = new google.maps.Polyline({
  strokeColor: '#FF00CC',
  strokeOpacity: 1.0,
  strokeWeight: 3
});


function ajax() {
  var ajaxArray = [];
  ajaxArray[0] = {
    "lat": "50.22",
    "lng": "19.22",
    "text": "pos1"
  };
  ajaxArray[1] = {
    "lat": "49.00",
    "lng": "19.88",
    "text": "pos2"
  };
  ajaxArray[2] = {
    "lat": "49.40",
    "lng": "21.22",
    "text": "pos3"
  };
  ajaxArray[3] = {
    "lat": "49.90",
    "lng": "21.66",
    "text": "pos4"
  };

  ajaxArray[0].lat = Math.random() * 49;
  ajaxArray[2].lat = Math.random() * 49;

  return ajaxArray;
}


function ajax2() {
  var ajaxArray2 = [];
  ajaxArray2[0] = {
    "lat": "20.22",
    "lng": "19.22",
    "text": "dax1"
  };
  ajaxArray2[1] = {
    "lat": "20.00",
    "lng": "24.88",
    "text": "dax2"
  };


  ajaxArray2[0].lat = Math.random() * 20;
  return ajaxArray2;
}


$(document).ready(function() {
  onStart();
});


function clearOverlays() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  marker = [];
}


function onStart() {
  centerLat = 20.22;
  centerLng = 21.22;

  var mapProp = {
    center: new google.maps.LatLng(centerLat, centerLng),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  mapOfSalons = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  initialize();
}



function drwaUserRoad(poly, data, color) {
  if (poly && poly.setMap) {
    poly.setMap(null);
    poly.setPath([]);
  } else {
    poly = new google.maps.Polyline({
      strokeColor: color,
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
  }
  var path = [];
  for (i = 0; i < data.length; ++i) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data[i].lat, data[i].lng),
      map: mapOfSalons,
      title: data[i].text
    });
    path.push(marker.getPosition());
    markers.push(marker);
  }
  poly.setPath(path);
  poly.setMap(mapOfSalons);
}

function initialize() {
  clearOverlays();
  var data = ajax();
  var data2 = ajax2();
  drwaUserRoad(polly, data, '#000000');
  drwaUserRoad(polly2, data2, '#FF00CC');
  setTimeout(initialize, 10000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<body style="margin: 0 auto;">
  <div id="googleMap" style="width:100%;height:100vh;"></div>
</body>

updated fiddle

这篇关于通过折线连接标记组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！