Google карта HTMLMarker) (петля в разных местах)

Question

Что у меня есть это массив:

var data = new Array();     
data[0] = new Array(); 
data[0][0] = 'First_loc'; 
data[0][1] = '36.91781,36.63568'; 
data[1] = new Array(); 
data[1][0] = 'Second_loc'; 
data[1][1] = '36.88827,36.636908'; 

После инициализирую Google Maps

var overlay; 

function initialize() { 
    var myLatLng = new google.maps.LatLng(36.88827, 36.636908); 
    var mapOptions = { 
     zoom: 9, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    for (var i = 0; i < data.length; i++) { 
     var name_1 = data[i][0]; 
     var loc = data[i][1]; 

     function HTMLMarker() { 

      this.pos = new google.maps.LatLng(loc); 

     } 


     HTMLMarker.prototype = new google.maps.OverlayView(); 
     HTMLMarker.prototype.onRemove = function() {} 
     //init your html element here 
     HTMLMarker.prototype.onAdd = function() { 
      div = document.createElement('DIV'); 
      div.className = "htmlMarker"; 
      div.data = "data-price"; 
      div.innerHTML = '<a href="#' + name_1 + '" class="pin_on_map"></a>'; 
      var panes = this.getPanes(); 
      panes.overlayImage.appendChild(div); 
     } 

     HTMLMarker.prototype.draw = function() { 
      var overlayProjection = this.getProjection(); 
      var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
      var panes = this.getPanes(); 
      panes.overlayImage.style.left = position.x - 30 + 'px'; 
      panes.overlayImage.style.top = position.y - 48 + 'px'; 
     } 

     //to use it 
     var htmlMarker = new HTMLMarker(loc); 

     htmlMarker.setMap(gmap); 
    } 
} 

Теперь я Looping функции (и это не good) И я получаю последнее значение, поэтому у меня есть два контакта на карте с одинаковыми значениями. Если кто-нибудь знает решение? Итак, после цикла я буду иметь разные контакты с разными значениями (местоположение и имя)

Answer 1

Вам нужно переместить код создания маркера в функцию вместо того, чтобы иметь его в теле цикла for. Изменить этот код:

for (var i = 0; i < data.length; i++) { 
     var name_1 = data[i][0]; 
     var loc = data[i][1]; 
     ... 

к:

for (var i = 0; i < data.length; i++) { 
     addMarker(data[i]); 
    } 

    function addMarker(place) { 
     var name_1 = place[0]; 
     var loc = place[1]; 
     ... 

Проблема с исходным кодом является то, что есть только одна копия name_1 и loc переменных разделяемых среди всех маркеров, а когда асинхронный код в ваших маркетах HTMLMarker вызывается — задолго до окончания цикла — эти переменные имеют последние значения, которые они имели в последней итерации цикла. Перемещая этот код в функцию, вы получаете замыкание для каждой итерации цикла, чтобы каждый маркер имел отдельную копию этих переменных.

Это изменение происходит, чтобы исправить тонкую проблему в коде: функция HTMLMarker была определена внутриfor петли. В JavaScript это действительно не разрешено, но различные браузеры принимают его в любом случае —, и разные браузеры относятся к нему по-разному. Функции могут быть вложены внутри других функций, но не внутри циклов, либо в операторы if или аналогичные блоки.

Кроме того, я не очень внимательно смотрел на реализацию HTMLMarker, но это не идеальный вариант для создания этого конструктора и прототипа внутри цикла (или теперь внутри функции addMarker()). Лучше было бы переместить его за пределы и передать данные в конструктор. И у вас возникла проблема с конструктором - вы передаете ему строку вместо двух чисел.

В вашем маркере DIVs нет фактического текста, поэтому я изменил его, чтобы поместить имя внутри тега, и добавил для них стиль CSS, включая, в частности, position:absolute.

Небольшая записная книжка: в некоторых методах HTMLMarker отсутствовали точки с запятой. Заявление, как это должно иметь точку с запятой в конце:

HTMLMarker.prototype.onRemove = function() {}; 

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

Закрепление все из них, код выглядит следующим образом:

var data = [ 
    [ 'First_loc', '36.95781,36.63568' ], 
    [ 'Second_loc', '36.88827,36.636908' ] 
]; 

function HTMLMarker(place) { 
    var latLngStrings = place[1].split(','); 
    var lat = +latLngStrings[0]; 
    var lng = +latLngStrings[1]; 
    this.name = place[0]; 
    this.pos = new google.maps.LatLng(lat, lng); 
} 

HTMLMarker.prototype = new google.maps.OverlayView(); 

HTMLMarker.prototype.onRemove = function() {}; 

HTMLMarker.prototype.onAdd = function() { 
    var div = this.div = document.createElement('DIV'); 
    div.className = "htmlMarker"; 
    div.data = "data-price"; 
    div.innerHTML = '<a href="#' + this.name + '" class="pin_on_map">' + this.name + '</a>'; 
    var panes = this.getPanes(); 
    panes.overlayImage.appendChild(div); 
}; 

HTMLMarker.prototype.draw = function() { 
    var overlayProjection = this.getProjection(); 
    var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
    var panes = this.getPanes(); 
    this.div.style.left = position.x - 30 + 'px'; 
    this.div.style.top = position.y - 48 + 'px'; 
}; 

function initialize() { 
    var myLatLng = new google.maps.LatLng(36.88827, 36.636908); 
    var mapOptions = { 
     zoom: 9, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    for (var i = 0; i < data.length; i++) { 
     addMarker(data[i]); 
    } 

    function addMarker(place) { 
     var htmlMarker = new HTMLMarker(place); 
     htmlMarker.setMap(gmap); 
    } 
} 

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

с этим CSS:

.htmlMarker { 
    border: 1px solid #888; 
    background-color: white; 
    padding: 2px; 
    font-size: 14px; 
    position: absolute; 
} 

А вот рабочий fiddle.