Маркеры по нескольким координатам на Google Map в JavaScript - PullRequest
Новая
       8

Маркеры по нескольким координатам на Google Map в JavaScript

0 голосов
/ 09 мая 2018

У меня есть два набора координат точек, которые мне нужно подключить на карте Google, как это, просто намного больше: 

  var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];

  var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];

Первая координата от «начала» должна быть связана с первой координатой от «конца» и так далее до конца. Понятно, но теперь мне нужно сделать точки начала и конца более узнаваемыми, нанести на них какие-то точки другого цвета. Что у меня есть: 

var geocoder;
var map;

function initialize() {

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

  var bounds = new google.maps.LatLngBounds();

  var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
  var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];

  var paths = [];

  for (var i=0; i < end.length; i++){
    var startCoords = start[i].split(",");
    var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
    var endCoords = end[i].split(",");
    var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
    paths.push([startPt, endPt]);

    bounds.extend(startPt);
    bounds.extend(endPt);
  }
  map.fitBounds(bounds);

  var polyline = new google.maps.Polygon({
    paths: paths,
    strokeColor: 'red',
    strokeWeight: 2,
    strokeOpacity: 1
  });

  polyline.setMap(map); 

}


google.maps.event.addDomListener(window, "load", initialize);

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 11 мая 2018

Самое простое, что вы можете просто создать маркеры для начальной и конечной точек. Как следующий код 

for (var i=0; i < end.length; i++){
  var startCoords = start[i].split(",");
  var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
  var endCoords = end[i].split(",");
  var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
  paths.push([startPt, endPt]);

  bounds.extend(startPt);
  bounds.extend(endPt);

  //Create start and end markers
  var markerStart = new google.maps.Marker({
    position: startPt,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 3,
      fillColor: 'blue',
      strokeColor: 'blue'
    },
    draggable: true,
    map: map
  });
  var markerEnd = new google.maps.Marker({
    position: endPt,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 3,
      fillColor: 'green',
      strokeColor: 'green'
    },
    draggable: true,
    map: map
  });
}

Это даст вам что-то вроде

enter image description here

Фрагмент кода 

var map;
function initMap() {
  var center = new google.maps.LatLng(51.97559, 4.12565);
  map = new google.maps.Map(document.getElementById('map'), {
     center: center,
     zoom: 12,
     mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var bounds = new google.maps.LatLngBounds();

  var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
  var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];

  var paths = [];

  for (var i=0; i < end.length; i++){
    var startCoords = start[i].split(",");
    var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
    var endCoords = end[i].split(",");
    var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
    paths.push([startPt, endPt]);

    bounds.extend(startPt);
    bounds.extend(endPt);

    //Create start and end markers
    var markerStart = new google.maps.Marker({
      position: startPt,
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 3,
        fillColor: 'blue',
        strokeColor: 'blue'
      },
      draggable: true,
      map: map
    });
    var markerEnd = new google.maps.Marker({
      position: endPt,
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 3,
        fillColor: 'green',
        strokeColor: 'green'
      },
      draggable: true,
      map: map
    });
  }
  map.fitBounds(bounds);

  var polyline = new google.maps.Polygon({
    paths: paths,
    strokeColor: 'red',
    strokeWeight: 2,
    strokeOpacity: 1
  });

  polyline.setMap(map); 
}
#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
    async defer></script>
...