Javascript 如何将google places API结果数组与knockout集成？

我正在尝试创建一个GoogleMaps应用程序，它使用PlacesAPI在地图中添加有趣地点的标记，并使用knockout.js填充列表

到目前为止，我使用以下代码成功地用位置填充了地图：

'use strict'

// Google Maps API and Places library functions to start the map
var map;
var service;
var infowindow;

function initialize() {
  var coimbra = new google.maps.LatLng(40.209658,-8.419721);

  map = new google.maps.Map(document.getElementById('map'), {
    center: coimbra,
    zoom: 18,
    disableDefaultUI: true
  });

  // Request for places library for nearby places of interest
  // Most of the code comes from the google Maps API documentation
  var request = {
    location: coimbra,
    radius: '400',
    types: ['store', 'café','food', 'bar']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

// Function that receives the results of the callback function and adds the markers to the map
function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
}

“严格使用”
//Google Maps API并放置库函数来启动地图
var映射；
var服务；
var信息窗口；
函数初始化（）{
var coimbra=newgoogle.maps.LatLng（40.209658，-8.419721）；
map=new google.maps.map（document.getElementById（'map'）{
中心：科英布拉，
缩放：18，
disableDefaultUI:true
});
//申请就近名胜古迹的地点图书馆
//大部分代码来自GoogleMapsAPI文档
var请求={
地点：科英布拉，
半径：“400”，
类型：[“商店”、“咖啡馆”、“食品”、“酒吧”]
};
服务=新的google.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
}
函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i

我还有以下HTML：

邻里地图
提交

快速概述击出的工作原理：您有一个视图、击出和一个viewmodel。视图就是DOM：用户将看到的所有内容。viewmodel是一组变量，表示视图的所有可能状态，包括数据和控件状态（如选中的复选框）。敲除位于视图和viewmodel之间，其目的是确保它们同步：视图中的更改反映在viewmodel中，反之亦然。这样，您就永远不必弄乱DOM

绑定处理程序属于敲除。它们告诉Knockout如何将视图的特定部分与其在viewmodel中对应的元素同步。包含基本的、通用的DOM元素的处理程序，但是当您得到一个像GoogleMaps工具包中的复杂元素时，没有预先编写的绑定

在绑定处理程序中，您可以访问DOM元素和绑定到它的viewmodel变量，以便使它们的更改相互反映

综上所述，在我看来，数组获取是一个纯粹的数据操作，不涉及DOM，所以您可能只需要这样做

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    myArrayOfResults(results);
  }
}

在viewmodel代码中的某个地方，

myArrayOfResults

是在viewmodel中定义的一个observableArray

---

如果你还没有通过考试，那是值得的。当您达到需要编写绑定处理程序的程度时，本文也将介绍这一点。还有一些更全面的说明。

您的代码不清楚，尤其是重复使用

结果

和不使用

位置

的方式。你定义了viewmodel吗？我主要从官方的GoogleMap文档中获得了PlacesAPI和地图的代码片段。我将定义一个用于填充列表和添加搜索栏的viewmodel，但也有人建议我将与google maps相关的所有内容都排除在viewmodel之外，这是我困惑的一部分：如何使用数组（带位置）通过在viewmodel中使用带有回调函数的places API可以获得。您需要一个用于映射函数的自定义绑定处理程序。这里有一个，但我不知道它是否适合你的需要。如果你不知道什么是自定义绑定处理程序，或者你为什么需要自定义绑定处理程序，请告诉我，我会安排一位解释者作为答案。如果你能给我一个解释，并且不会占用你太多时间，我会非常高兴：）非常感谢Roy，你的解释对我帮助很大：）