Нужна помощь: Knockout.js наблюдаемый массив с API Карт Google

Я начинающий, когда дело доходит до javascript, и я действительно застрял в одном из моих проектов. У меня есть одна страница с Google Map определенной области. Я использую соседний поиск, чтобы заполнить 20 мест и поместить их в наблюдаемый массив. Затем я также заполняю список со всеми местами из массива.Нужна помощь: Knockout.js наблюдаемый массив с API Карт Google

Я хочу, чтобы каждый элемент списка можно было щелкнуть, а затем скопировать карту на маркер каждого места и открыть инфо-окно.

Вот некоторые из моего кода:

HTML:

<body> 
    <input id="pac-input" class="controls" type="text" 
     placeholder="Enter a Location"> 
    <div id="map-canvas"></div> 
    <div id="list"> 
     <h2 style="text-align: center;">Good Eats!</h2> 
     <ul data-bind="foreach: allPlaces"> 
      <li data-bind="click: $parent.clickMarker"> 
       <p data-bind="text: name"></p> 
       <p data-bind="text: address"></p> 
      </li> 
     </ul> 
    </div> 
</body>

Javascript:

function appViewModel() { 
    var self = this; 
    var map; 
    var service; 
    var infowindow; 
    var chapelHill = new google.maps.LatLng(35.908759, -79.048100); 
    var markersArray = []; 
    var marker; 

    self.allPlaces = ko.observableArray([]); 

    self.clickMarker = function(place) { 
    console.log('clicked'); 
    for(var e in markersArray) 
    if(place.place_id === markersArray[e].place_id) { 
     map.panTo(markersArray[e].place_id); 
    } 
    } 

    function getAllPlaces(place){ 
    var myPlace = {}; 
    myPlace.address = place.vicinity; 
    myPlace.place_id = place.place_id; 
    myPlace.position = place.geometry.location.toString(); 
    myPlace.name = place.name; 

    self.allPlaces.push(myPlace); 
    } 
    function createMarker(place) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     name: place.name.toLowerCase(), 
     position: place.geometry.location, 
     place_id: place.place_id, 
     animation: google.maps.Animation.DROP 
    }); 
    var address; 
    if (place.vicinity !== undefined){ 
     address = place.vicinity; 
    } else if (place.formatted_address !== undefined){ 
     address = place.formatted_address; 
    } 
    var contentString = '<div class="strong">' +place.name+ '</div><div>' + address + '</div>'; 
    markersArray.push(marker); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map, this); 
     map.panTo(marker.position);  
    }); 
    return marker; 
    }

Я застрял на функцию clickMarker.

Я оставил часть javascript, чтобы сохранить номер.

Вот ссылка на мои Gh-страницы, если вы хотите взглянуть на весь код:

http://tarheelsrule44.github.io/

Как вы можете сказать, что я был возиться с этим кодом к момент спагетти - это ужасно.

источник

2015-03-01 Tyler Woods

Я был застрял в функции clickMarker, пытаясь заставить его перевернуть маркер соответствующего элемента списка и открыть инфо-окно. Конечно, через 5 минут после публикации, я понял это самостоятельно. –

Извините за непонятный вопрос, но я понял это.

я изменил свою функцию clickMarker к этому:

self.clickMarker = function(place) { 
    console.log('clicked'); 
    for(var e in markersArray) 
    if(place.place_id === markersArray[e].place_id) { 
     map.panTo(markersArray[e].position); 
    } 
    }

Первоначально я ошибочно поставил map.panTo (markersArray [е] .place_id); что, конечно, не имеет смысла. Я думаю, это то, что я получаю в последнее время, поздно ночью, кодируя без кофе.

источник

2015-03-01 15:02:54

Не используйте 'for-in' для циклического ввода записей массива (без каких-либо гарантий); [подробности и лучшие альтернативы здесь] (http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript/9329476#9329476). –

Нужна помощь: Knockout.js наблюдаемый массив с API Карт Google

ответ

Смежные вопросы