2013-09-15 5 views
0

Я реализовал карту на веб-странице с помощью JavaScript API, и теперь я хочу показать основную информацию о каком-либо местоположении. В документации API JavaScript я обнаружил, что часть из них называется «Основной вид места» в разделе «Компоненты мест», но есть пример того, как визуализировать информацию с помощью placeId.Здесь Maps API - отображение основного места (placeId)

Мне нужно получить информацию, используя координаты места, если это возможно. Я попытался отобразить информацию, используя PHP-код, который определяет координаты для некоторого местоположения на карте, вместо того, чтобы использовать placeId, но он не работает.

Это пример кода, который я использовал:

var basicPlace = new nokia.places.widgets.Place({ 
        placeId: PHP code instead of placeId. 
        *exp: [<?php code;?>, <?php echo code;?>],* 
        targetNode: "map", 
        template: "nokia.blue.place" 
      }); 

Можно ли решить эту проблему, как это, или есть метод, который не включает в себя placeId.

Ссылки: Here Developer, Here JavaScript API

ответ

2

Если вы читали 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> 

Результат можно увидеть ниже:

Restaurants in Berlin.

+0

Это помогло мне понять вещи, спасибо. Еще один вопрос. Если я хочу показать информацию только о одном месте на карте, которое определяется координатами, полученными из php-кода, могу ли я использовать этот пример выше? Моя карта [пример] (http://i.imgur.com/jQHXxeT.png) – netman

+1

Если вы пытаетесь получить доступ к серверу «ЗДЕСЬ», вам необходимо использовать [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) –

+0

Спасибо за совет RESTful. Я изменил ваш пример выше, теперь мне просто нужно указывать маркер на карте map.center и добавить информационный пузырь с информацией о месте. Place = map.center. Можно ли это сделать с помощью JS API? Мой пример: http://pastebin.com/8Qfsey1U – netman

Смежные вопросы