2015-04-09 3 views
1

Я использую функцию в приложении, которая добавляет маркер к карте при нажатии кнопки, этот маркер также позволяет пользователям вводить информацию в виде редактируемых элементов, а также удалять маркер по запросу.получить позицию маркера из вложенных маркеров маркера google map

var markers = []; 

counter = 0; 

function addMarker(position) { 
counter++; 

    var bridgeIcon = new google.maps.MarkerImage("img/map_markers/warning_map_marker.png", null, null, null); 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude), 
     map: map, 
     title: "Hello!!", 
     draggable: true, 
     animation: google.maps.Animation.DROP, 
     icon: bridgeIcon, 
     id: counter 
    }); 

    markers.push(marker); 

     //Content structure of info Window for the Markers 
     var contentString = '<div class="marker-info-win">' + 
      '<h3>Marker Information</h3>' + 
      '<div class="warning-title" contenteditable="true" data-text="Warning Title"/></div>'+ 
      '<i class="fa fa-pencil"></i>' + 
      '<div class="warning-additional-info" contenteditable="true" data-text="Warning Additional Information"></div>'+ 
      '<i class="fa fa-pencil"></i>' + 
      '<br/><button id="deleteButton" name="remove-marker" class="remove-marker" title="Remove Marker" data-id="'+ counter +'">Remove Marker</button></div>'; 

     //Create an infoWindow 
     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     //add click event listener to marker which will open infoWindow   
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,this); // click on marker opens info window 
     }); 

google.maps.event.addListener(infowindow, 'domready', function() { 
     var button = document.getElementById('deleteButton'); 
     var id = parseInt(button.getAttribute('data-id')); 
     button.onclick = function() { 
      deleteMarker(id); 
     }; 
    }); 
} 

function deleteMarker(markerId) { 
    for (var i=0; i<markers.length; i++) { 
     if (markers[i].id === markerId) { 

      markers[i].setMap(null); 
     } 
    } 
} 

Приведенный выше код создает маркер и помещает его в массив, вопрос я имею в извлечении маркеров из массива для использования на карте на другой странице, я попытался перебрать массив в получить маркеры LatLng, но он не выводится на страницу, и я не получаю никаких ошибок?

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

Приведенный выше код является зацикливание действие, которое происходит на странице загрузки и должен загрузить все маркеры из массива на основе их позиции.

console.log (маркеры) возвращает следующий

[Lh]0: Lh 
__e3_: Object 
__gm: Object 
anchorPoint: T 
animating: false 
animation: null 
changed: function (a){a in e&&(delete this[Wc],d.j[Ze(this)]=this,Y0(d))} 
clickable: true 
closure_uid_180767458: 412 
draggable: true 
gm_accessors_: Object 
gm_bindings_: Object 
icon: Objectid: 1 
internalPosition: lf 
map: Zk 
position: lf 
title: "Hello!!" 
visible: true 
__proto__: c 
length: 1 
__proto__: Array[0] 

ответ

3

Создайте еще один массив с чистыми данными и поместить всю необходимую Вам информацию. Таким образом, вы получите что-то вроде:

var markersData = [] 

При создании маркера внутри цикла добавить индекс:

var marker = new google.maps.Marker({ 
        position: latlng, 
        map: googleMap, 
        title: 'Hello World!', 
        labelContent: "A", 
        labelAnchor: new google.maps.Point(3, 30), 
        labelClass: "labels", 
        labelInBackground: false, 
        index: i 
       }); 

Тогда внутри обработчика вы можете получить доступ к данным по

google.maps.event.addListener(marker, 'click', function() { 
       var info = markersData[this.index]; 
       ... 
      }); 
Смежные вопросы