如何将谷歌地方的API数组与结果集成在一起？

我正尝试创建一个Google Maps应用程序，它使用Places API在地图中添加有趣地点的标记以及使用knockout.js填充列表。如何将谷歌地方的API数组与结果集成在一起？

到目前为止，我设法使用下面的代码来填充位置的地图：

'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文档中，似乎我可以通过将来自地点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]); 
 
    } 
 
    } 
 
}

提前感谢！

来源

2016-02-19 Sarcus

你的代码不清晰，尤其是你使用'results'并且不使用'place'的方式。你有没有定义一个视图模型？ –

我主要从官方的Google地图文档中获取地点API和地图的代码片段。我将定义一个视图模型来填充列表并添加一个搜索栏，但我还被建议将与Google地图相关的所有内容都保留在视图模型之外，这是我混乱的一部分：如何使用获得的数组（包括地点）从使用具有回调函数的场所API与视图模型。 – Sarcus

你将需要一个地图函数的自定义绑定处理程序。这里有一个，http://testasoftware.com/steve/blog/knockout-binding-handler-for-google-maps/，但我不知道它是否会满足您的需求。如果您不知道自定义绑定处理程序是什么，或者您为什么需要它，请让我知道，我会将解释器作为答案。 –

Knockout如何工作的快速概览：您有一个视图，Knockout和一个视图模型。该视图是DOM：用户将看到的所有内容。视图模型是一组代表视图的所有可能状态的变量，包括数据和控制状态（如检查复选框）。 Knockout位于视图和视图模型之间，其目的是确保它们同步：视图中的变化会反映在视图模型中，反之亦然。这样，你永远不必乱搞DOM。

绑定处理程序属于Knockout。他们告诉Knockout如何在viewmodel中同步视图的特定部分与其相应的元素。包含基本通用DOM元素的处理程序，但是当您获得像Google地图工具包中那样的复杂元素时，没有预先写好的绑定。

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

所有这一切说，它看起来对我来说，你的阵列取是一种纯数据的操作，并不涉及DOM，所以你可能只是做

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

在视图模型代码

的地方，其中myArrayOfResults是在您的视图模型中定义的observableArray。

如果你还没有通过Knockout tutorial，这是值得你的时间。当你到了需要编写一个绑定处理程序的地步时，documentation也会覆盖它。还有一些更全面的指令this article。

来源

2016-02-20 00:37:56

非常感谢罗伊，你的解释帮了我很多:) – Sarcus

如何将谷歌地方的API数组与结果集成在一起？

回答

相关问题