Если вы читали nokia.places.widgets.Placedocumentation, вы увидите, что placeId является обязательным параметр. Фактически это первичный ключ для информации о месте, которая хранится ЗДЕСЬ. Поэтому вам нужно будет сделать еще один запрос с использованием JavaScript API до отображения, чтобы получить placeId, чтобы вы могли показать свои данные о месте. Очевидная вещь, чтобы сделать здесь, чтобы сделать запрос на категории первой, и хранить placeId с каждым маркером, как показано ниже:
// Function for receiving search results from places search and process them
var processResults = function (data, requestStatus, requestId) {
var i, len, locations, marker;
if (requestStatus == "OK") {
locations = data.results ? data.results.items : [data.location];
if (locations.length > 0) {
for (i = 0, len = locations.length; i < len; i++) {
// Add a marker and store the placeId
marker = new nokia.maps.map.StandardMarker(locations[i].position,
{ text: i+1 ,
placeId : locations[i].placeId});
resultSet.objects.add(marker);
}
}
});
// etc.. etc...
вторая часть является добавление щелчка слушателя, который отображает infobubble и заполняющий Place Widget с использованием сохраненного placeId:
resultSet.addListener("click" , function(evt) {
infoBubbles.openBubble("<div id='basicPlaceContainer'></div>",
evt.target.coordinate);
var basicPlace = new nokia.places.widgets.Place({
placeId: evt.target.placeId,
targetNode: "basicPlaceContainer",
template: "nokia.blue.bubble"
});
}, false);
Полный рабочий пример можно увидеть ниже:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Nokia Maps API for JavaScript Example: Search by category</title>
<meta name="description" content="Search by category"/>
<script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
</head>
<body>
<div id="mapContainer" style="width:540px; height:334px;"></div>
<script type="text/javascript" id="exampleJsSource">
/* Setup authentication app_id and app_code
*/
nokia.Settings.set("app_id", "YOUR APP ID");
nokia.Settings.set("app_code", "YOUR APP CODE");
// Use staging environment (remove the line for production environment)
nokia.Settings.set("serviceMode", "cit");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// Initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10,
components: [
new nokia.maps.map.component.Behavior()
]
});
this.infoBubbles = new nokia.maps.map.component.InfoBubbles();
map.components.add(infoBubbles);
var searchCenter = new nokia.maps.geo.Coordinate(52.51, 13.4),
searchManager = nokia.places.search.manager,
resultSet;
// Function for receiving search results from places search and process them
var processResults = function (data, requestStatus, requestId) {
var i, len, locations, marker;
if (requestStatus == "OK") {
locations = data.results ? data.results.items : [data.location];
if (locations.length > 0) {
if (resultSet) map.objects.remove(resultSet);
resultSet = new nokia.maps.map.Container();
resultSet.addListener("click" , function(evt) {
infoBubbles.openBubble("<div id='basicPlaceContainer'></div>", evt.target.coordinate);
var basicPlace = new nokia.places.widgets.Place({
placeId: evt.target.placeId,
targetNode: "basicPlaceContainer",
template: "nokia.blue.bubble"
});
}, false);
for (i = 0, len = locations.length; i < len; i++) {
marker = new nokia.maps.map.StandardMarker(locations[i].position,
{ text: i+1 ,
placeId : locations[i].placeId});
resultSet.objects.add(marker);
}
map.objects.add(resultSet);
map.zoomTo(resultSet.getBoundingBox(), false);
} else {
alert("Your search produced no results!");
}
} else {
alert("The search request failed");
}
};
// Make a place search request
var category = "eat-drink";
map.addListener("displayready", function() {
searchManager.findPlacesByCategory({
category: category,
onComplete: processResults,
searchCenter: searchCenter
});
});
</script>
</body>
</html>
Результат можно увидеть ниже:
Это помогло мне понять вещи, спасибо. Еще один вопрос. Если я хочу показать информацию только о одном месте на карте, которое определяется координатами, полученными из php-кода, могу ли я использовать этот пример выше? Моя карта [пример] (http://i.imgur.com/jQHXxeT.png) – netman
Если вы пытаетесь получить доступ к серверу «ЗДЕСЬ», вам необходимо использовать [RESTful Places API] (http: // developer.here.com/rest-apis/documentation/places). Я хотел бы сделать запрос на одно место, используя параметр size = 1, как показано ниже, для получения одного места Id: [45.81,15.97 = Zagrebačko Kazalište Mladih] (http://demo.places.nlp.nokia.com /places/v1/discover/here?at=45.8112199%2C15.9761811&size=1&result_types=place&app_code=gBoUkAMoxoqIWfxWA5DuMQ&app_id=_peU-uCkp-j8ovkzFGNU) –
Спасибо за совет RESTful. Я изменил ваш пример выше, теперь мне просто нужно указывать маркер на карте map.center и добавить информационный пузырь с информацией о месте. Place = map.center. Можно ли это сделать с помощью JS API? Мой пример: http://pastebin.com/8Qfsey1U – netman