0

我使用 JavaScript API 在网页上实现了地图，现在我想显示有关某个位置的基本信息。在 JavaScript API 文档中，我在 Places Components 部分找到了其中一部分称为“基本地点显示”，但有一个如何使用 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

4

1 回答 1

2

如果您阅读nokia.places.widgets.Place 文档，您会看到 placeId 是一个强制参数。它实际上是 HERE 持有的地点信息的主键。因此，您需要在显示之前使用 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...

第二部分是添加显示信息气泡并使用存储的placeId填充 Place Widget 的点击侦听器：

  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>

结果如下所示：

柏林的餐馆。

于 2013-09-16T14:40:09.240 回答