Нарисуйте полилинию от маркера при нажатии Google Maps API v3

Question

Нарисуйте полилинию от маркера при нажатии Google Maps API v3

Это продолжение поста, который я сделал несколько дней назад, чтобы попытаться принять вызов в новом направлении. Моя цель - когда я нажимаю на маркер, я бы хотел, чтобы начальная широта / полнота моей полилинии была такой же, как у этого маркера. Уловка, с которой я сталкиваюсь, заключается в том, чтобы поместить создание линии в цикл for моих маркеров, где существует нажатие, чтобы линия использовала координаты маркера, а не объявленного. Поскольку я объявляю свои переменные lat / lng вне этой функции, строка по умолчанию принимает их значения: var oLat = 10.1 var oLng = 22.1 а не значения внутри моего цикла for. Вот мой текущий цикл:

for (var i in points) {
var p = points[i];
var latlng = new google.maps.LatLng(p[1], p[2]);

var marker = new google.maps.Marker({
    position: latlng,
    icon: points[i][3],
    zIndex: p[5],
    title: p[0]     
});

overviewMarkers.push(marker);


google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
    infowindow.setContent(points[i][6] + '<div id="infopanel">'+
  '<input onclick="addLine();" type=button value="Show Routes">'+
  '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
      infowindow.open(map, marker)
     oLat = parseFloat(this.position.lat().toFixed(4))
     oLng = parseFloat(this.position.lng().toFixed(4))
        }      
    })(marker, i) );        
}//end for loop

Я попытался разместить код линии (ниже) после oLng = parseFloat(this.position.lng().toFixed(4)) но тогда моя линия не будет рисовать. Если я оставлю свой строковый код за пределами всей функции, он будет отображаться со значениями по умолчанию. Код создания строки (я добавил предупреждение только для того, чтобы подтвердить, что моя переменная захватит значение при нажатии):

var arrayLine=[]
var originPoint = [new google.maps.LatLng(oLat,oLng)];
var destPoint = [new google.maps.LatLng(51.9279723,4.4904063),
                 new google.maps.LatLng(40.136482, -73.831299),
                 new google.maps.LatLng(34.0204989,-118.4117325)                 
                ];
var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW                  
};

for (var d in destPoint) {
    var t = destPoint[d];

  var linePath = new google.maps.Polyline({
    path: [originPoint[0],[t][0]], 
    strokeColor: '#4A484D',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
      icons: [{
    icon: lineSymbol,
    offset: '100%',
    repeat: '60px'
  }]

  });
   arrayLine.push(linePath)

function setLines(map) {
for (var i = 0; i < arrayLine.length; i++) {
    arrayLine[i].setMap(map);
    }
   }
  }
function addLine() {
setLines(map);
alert(parseFloat(oLat));
}

Я попытался взглянуть на пример сложного полиина, который предоставляет Google, но он кажется немного более простым, чем то, что я пытаюсь сделать.

1

google-maps-api-3 polyline

Источник

user4023949 11 сен '14 в 18:08

1 ответ

Решение

Другие вопросы по тегам google-maps-api-3 polyline

user1210329 11 сен '14 в 20:13 2014-09-11 20:13 · Accepted Answer · 2014-09-11 20:13

вам нужно создать ломаную линию в приемнике щелчка маркера (где маркер доступен, и вы можете получить его положение).
использовать документированные методы (.getPosition(), а не недокументированные свойства.position)

for (var i in points) {
    var p = points[i];
    var latlng = new google.maps.LatLng(p[1], p[2]);

    var marker = new google.maps.Marker({
        position: latlng,
        icon: points[i][3],
        zIndex: p[5],
        map: map,
        title: p[0]
    });

    overviewMarkers.push(marker);


    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            var originPoint = this.getPosition();
            var oLat = parseFloat(this.getPosition().lat().toFixed(4));
            var oLng = parseFloat(this.getPosition().lng().toFixed(4));
            for (var d in destPoint) {
                var t = destPoint[d];

                var linePath = new google.maps.Polyline({
                    path: [originPoint, [t][0]],
                    strokeColor: '#4A484D',
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    geodesic: true,
                    icons: [{
                        icon: lineSymbol,
                        offset: '100%',
                        repeat: '60px'
                    }],
                    map: map

                });
                arrayLine.push(linePath);
            }
            infowindow.setContent(points[i][6] + '<div id="infopanel">' +
                '<input onclick="addLine();" type=button value="Show Routes">' +
                '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
            infowindow.open(map, marker);
        };
    })(marker, i));
} //end for loop

рабочая скрипка

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

var map;
var arrayLine = [];
var overviewMarkers = [];
var oLat, oLng;

function initialize() {
  var myLatlng = new google.maps.LatLng(0, 180);
  var mapOptions = {
    zoom: 1,
    center: myLatlng
  };
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var points = [
    ['Karachi, Pakistan', 25.0111453, 67.0647043, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png', 'Overview', 1, '<h4>Sample Text</h4'],
    ['Bangkok, Thailand', 13.7246005, 100.6331108, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png',
      'Overview', 1, '<h4>Sample Text</h4>'
    ],
    ['Rotterdam, Netherlands', 51.9279723, 4.4904063, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>'],
    ['New York, NY, USA', 40.7056308, -73.9780035, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>'],
    ['Memphis, TN, USA', 35.129186, -89.9696395, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>']
  ];

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

  var originPoint = [];
  // Creates markers  
  for (var i in points) {
    var p = points[i];
    var latlng = new google.maps.LatLng(p[1], p[2]);

    var marker = new google.maps.Marker({
      position: latlng,
      icon: points[i][3],
      zIndex: p[5],
      map: map,
      title: p[0]
    });

    overviewMarkers.push(marker);


    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        var originPoint = this.getPosition();
        var oLat = parseFloat(this.getPosition().lat().toFixed(4));
        var oLng = parseFloat(this.getPosition().lng().toFixed(4));
        for (var d in destPoint) {
          var t = destPoint[d];

          var linePath = new google.maps.Polyline({
            path: [originPoint, [t][0]],
            strokeColor: '#4A484D',
            strokeOpacity: 1.0,
            strokeWeight: 2,
            geodesic: true,
            icons: [{
              icon: lineSymbol,
              offset: '100%',
              repeat: '60px'
            }],
            map: map

          });
          arrayLine.push(linePath);
        }
        infowindow.setContent(points[i][6] + '<div id="infopanel">' +
          '<input onclick="addLine();" type=button value="Show Routes">' +
          '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
        infowindow.open(map, marker);
      };
    })(marker, i));
  } //end for loop  
}
var arrayLine = [];
var originPoint = [new google.maps.LatLng(oLat, oLng)];
var destPoint = [new google.maps.LatLng(51.9279723, 4.4904063),
  new google.maps.LatLng(40.136482, -73.831299),
  new google.maps.LatLng(34.0204989, -118.4117325)
];
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};

function addLine() {
  setLines(map);
  // alert(parseFloat(oLat));
}
google.maps.event.addDomListener(window, 'load', initialize);

function setLines(map) {
  for (var i = 0; i < arrayLine.length; i++) {
    arrayLine[i].setMap(map);
  }
}

function removeLine() {
  setLines(null);
}

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#infopanel {
  width: 200px;
  height: 60px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="panel">
  <input onclick="showFactoryMarkers();" type=button value="Show Factories">
  <input onclick="showCFSMarkers();" type=button value="Show CFS">
  <input onclick="showPortMarkers();" type=button value="Show Ports">
  <input onclick="hideMarkers();" type=button value="Hide All">
</div>
<div id="map-canvas"></div>