如何将谷歌放置 API 结果数组与淘汰赛集成

How to integrate google places API array of results with knockout?

本文关键字：数组 结果 淘汰赛 集成 API 谷歌      更新时间：2023-09-26

我正在尝试创建一个谷歌地图应用程序，该应用程序使用地点API在地图上添加有趣地点的标记，并使用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
  });
}

我也有以下 HTML： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Neighbourhood Map</title>
  <link rel="stylesheet" href="css/main.css">
  <script src='js/knockout-3.4.0.js'></script>
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src='js/app.js'></script>
</head>
<body>
  <div class="search-bar">
    <form class='search'>
      <input placeholder="Filter results by name" autofocus>
      <button>Submit</button>
    </form>
  </div>
  <div class="content">
    <ul class="list-places">
      <li class="place"></li>
    </ul>
  </div>
  <div id="map"></div>
  <script async defer src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBXeGehzCayzqOJWG56XYrst22ZQ-hUzJA&libraries=places&callback=initialize'></script>
</body>
</html>

从 Knockout 文档中，我似乎可以通过将来自 places API 的数组设置为ko.observableArray来填充列表，然后在 <ul> 和 <li> 标签中使用相应的数据绑定来填充列表 API 找到的所有位置。

但是，我的主要疑问是如何访问该数组以将其设置为ko.observableArray：

我应该做这样的事情还是我错过了任何其他方式？

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

提前感谢！

快速

概述挖空的工作原理：您有一个视图、挖空和一个视图模型。视图是 DOM：用户将看到的所有内容。视图模型是表示视图所有可能状态的变量集合，包括数据和控件状态（如选中了哪些复选框）。挖空位于视图和视图模型之间，其目的是确保它们同步：视图中的更改会反映在视图模型中，反之亦然。这样，您就不必弄乱 DOM。

绑定处理程序属于 Knockout。它们告诉 Knockout 如何将视图的特定部分与视图模型中的相应元素同步。包括基本的、常见的 DOM 元素的处理程序，但是当您获得像 Google 地图工具包中的复杂元素时，没有预先编写的绑定。

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

综上所述，在我看来，您的数组获取是一种不涉及 DOM 的纯数据操作，因此您可能只需执行 

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

在您的视图模型代码中的某个位置，其中myArrayOfResults是视图模型中定义的可观察数组。

如果您还没有完成淘汰赛教程，那么值得您花时间。当您需要编写绑定处理程序时，文档也会涵盖这一点。还有这篇文章提供了一些更全面的指导。

相关文章：