需要帮助：带有 Google Maps API 的 Knockout.js observableArray

Question

当谈到 javascript 时，我是一个初学者，我真的被困在我的一个项目上。我有一个页面，上面有某个区域的谷歌地图。我使用附近的搜索来填充 20 个地点并将它们放入一个可观察的数组中。然后，我还使用数组中的所有位置填充一个列表。

我想让每个列表项都可以点击，然后让地图平移到每个地方的标记并打开一个信息窗口。

这是我的一些代码：

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-pages 的链接：

http://tarheelsrule44.github.io/

正如您可能知道的那样，我一直在乱搞这段代码，以至于把它搞得像意大利面条一样可怕。

Answer 1

抱歉问题不清楚，但我想通了。

我将 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[e].place_id);当然，这没有任何意义。我想这就是我在没有咖啡的情况下进行深夜编码所得到的。