Question

我想使用javascript将多个标记连接到一个位置。

我已经编写了下面的代码，我正在获得按顺序连接的标记（如图所示）。

仅供参考，我是使用javascript和谷歌地图的初学者。

我想将标记连接到以下位置 ['134.56.32.13'，19.0760,72.8777]
哪里，
'134.56.32.13'是示例IP地址
19.0760是纬度
72.8777是经度。

这是我发现有助于连接位置的链接 - Connect Multiple markers with polyline

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

proof of concept fiddle

代码段

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>

如何使用javascript将多个标记连接到单个位置

1 个答案: