需要帮助:Knockout.js observaleArray与谷歌地图API

Need Help: Knockout.js observableArray with Google Maps API

本文关键字：observaleArray 谷歌地图 API js Knockout 帮助      更新时间：2023-09-26

当谈到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页面：

http://tarheelsrule44.github.io/

正如你可能知道的，我一直在摆弄这个代码，甚至把它弄得一团糟。

很抱歉有不清楚的问题，但我想明白了。

我将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）；当然，这毫无意义。我想这就是我在没有咖啡的情况下深夜编码的结果。

相关文章：