Question

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

页面上的标记每10秒刷新一次。

我将非常感谢任何帮助。

<!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

Answer 1

是的，这是可能的。

代码段

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

updated fiddle

通过折线连接标记组

1 个答案: