Как подключить несколько маркеров в одном месте, используя JavaScript

Question

Я хотел подключить несколько маркеров в одном месте, используя JavaScript.

Я написал код ниже и получаю маркеры, которые подключаются последовательно (как на рисунке).

К вашему сведению, я новичок в работе с javascript и google maps.

Я хотел подключить маркеры к следующему месту ['134.56.32.13', 19.0760, 72.8777]
где
«134.56.32.13» - это пример IP-адреса
19.0760 - широта
72,8777 - это долгота.

Это ссылка, которую я нашел полезной при подключении мест - Соединение нескольких маркеров с полилинией

var locations = [
  ['123.134.67.145', 22.5726, 88.3639],
  ['140.91.57.132', 28.7041, 77.1025],
  ['110.191.167.130', 13.0827, 80.2707],
  ['192.168.151.151', 12.9716, 77.5946]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: new google.maps.LatLng(19.75, 77.94),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;
var flightPlanCoordinates = [];
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
  flightPlanCoordinates.push(marker.getPosition());
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));

  var flightPath = new google.maps.Polyline({
    map: map,
    path: flightPlanCoordinates,
    strokeColor: "#ff0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  flightPath.setMap(map);
}

Маркеры подключаются последовательно. Это изображение.

Вот так должен выглядеть вывод

Answer 1

Проще всего добавить эту запись в ваш массив, затем пропустить ее и создать две точечные полилинии, начинающиеся там и переходящие к каждому (другому) маркеру в массиве:

var locations = [
  ['134.56.32.13', 19.0760, 72.8777],
  ['123.134.67.145', 22.5726, 88.3639],
  ['140.91.57.132', 28.7041, 77.1025],
  ['110.191.167.130', 13.0827, 80.2707],
  ['192.168.151.151', 12.9716, 77.5946]
];

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));

  if (i != 0) {
    var flightPlanCoordinates = [
      new google.maps.LatLng(locations[0][1], locations[0][2]),
      marker.getPosition()
    ];

    var flightPath = new google.maps.Polyline({
      map: map,
      path: flightPlanCoordinates,
      icons: [{
        icon: {
          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
        },
        offset: '50%'
      }],
      strokeColor: "#ff0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
    flightPath.setMap(map);
  }

подтверждение концепции скрипки

фрагмент кода:

var locations = [
  ['134.56.32.13', 19.0760, 72.8777],
  ['123.134.67.145', 22.5726, 88.3639],
  ['140.91.57.132', 28.7041, 77.1025],
  ['110.191.167.130', 13.0827, 80.2707],
  ['192.168.151.151', 12.9716, 77.5946]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: new google.maps.LatLng(19.75, 77.94),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;
// create polylines
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));

  if (i != 0) {
    var flightPlanCoordinates = [
      new google.maps.LatLng(locations[0][1], locations[0][2]),
      marker.getPosition()
    ];

    var flightPath = new google.maps.Polyline({
      map: map,
      path: flightPlanCoordinates,
      icons: [{
        icon: {
          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
        },
        offset: '50%'
      }],
      strokeColor: "#ff0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
    flightPath.setMap(map);
  }
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>