HERE maps Geocoder Autocomplete API - 响应结果显示

Question

我想知道如何在 HERE 地图的面板中将我的建议列表作为可点击列表返回。 到目前为止，我能够在此处获取作为 JSON 对象返回的响应（在文本字段中输入以查看结果）...

https://codepen.io/JHiar/pen/PjEEzG

    /**
 * Format the geocoding autocompletion response object's data for display
 *
 * @param {Object} response
 */
function addSuggestionsToPanel(response) {
  var suggestions = document.getElementById('suggestions');
  suggestions.innerHTML = JSON.stringify(response, null, ' ');
}

但我真正想要的是我的建议返回到面板中，如此处的屏幕截图示例（查看面板内突出显示字符的结果）... https://developer.here.com/rest-apis/documentation/geocoder-autocomplete/topics/using-autocomplete.html

我不知道如何在文档中完成此操作，而且似乎没有任何示例。

在 Google 地图中，这是由 Place Autocomplete Service 完成的 - 有人知道在 HERE 地图的面板中显示建议列表吗？任何帮助表示赞赏。

Answer 1

您可以从 json 响应中的建议数组中提取标签数据。下面的代码 sn-p 显示了如何实现此目的的示例。有关整个代码和示例的更多详细信息，您可以使用我们的示例站点 tcs.ext.here.com/examples/v3/geocoder_autocomplete。快乐编码！

geocoderRequest = $.ajax({
                    url : autoCompelteUrl,
                    dataType : "json",
                    data : {
                        maxresults : 5,
                        country : countryCheck.checked ? countries : "",
                        language : document.getElementById("language").value,
                        query : request.term,
                        beginHighlight : '<mark>',
                        endHighlight : '</mark>',
                        app_id : app_id,
                        app_code : app_code,
                        mapview : mapViewCheck.checked ? viewBounds.getTopLeft().lat + "," + 
                                    viewBounds.getTopLeft().lng + ";" + viewBounds.getBottomRight().lat +
                                        "," + viewBounds.getBottomRight().lng : ""
                    }
                });

                $.when( getReady(), geocoderRequest).done( function( readyResponse, geocoderResponse, placesResponse ) 
                {
                    var g = $.map(geocoderResponse[0].suggestions, function (item) {
                                var label = item.label;
                                // replace style class used for highlight
                                value = label.replace(/(<mark>|<\/mark>)/gm, ''); 
                                name = label;
                                return {
                                    label : name,
                                    value : value 
                                }
                            });

                    response(g);
                });

Answer 2

这是一个使用Select2 的解决方案，它列出了结果并使用Leaflet 显示选择地图。

var options = {
  minimumInputLength: 1,
  ajax: {
    url: 'https://autocomplete.geocoder.cit.api.here.com/6.2/suggest.json',
    delay: 250,
    dataType: 'json',
    data: function (params) {
      return {
        query: params.term,
        app_id: 'DemoAppId01082013GAL',
        app_code: 'AJKnXv84fjrb0KIHawS0Tg',
        beginHighlight: '<b>',
        endHighlight: '</b>',
        country: 'USA'
      };
    },
    processResults: function (data) {
      return {
        results: $.map(data.suggestions, function (obj) {
          return { id: obj.locationId, text: obj.label.split(', ').reverse().join(', ') };
        })
      };
    }
  },
  escapeMarkup: function (markup) { return markup; }
};

$('#location').select2(options).on('select2:select', function (e) {
  $.getJSON('https://geocoder.cit.api.here.com/6.2/geocode.json', {
    app_id: 'DemoAppId01082013GAL',
    app_code: 'AJKnXv84fjrb0KIHawS0Tg',
    locationId: e.params.data.id
  }).done(function (data) {
    var locn = data.Response.View[0].Result[0].Location;
    var mymap = L.map('map').setView([locn.DisplayPosition.Latitude, locn.DisplayPosition.Longitude], 15);

    var opts = {
      attribution: 'Map &copy; 1987-' + new Date().getFullYear() + ' <a href="http://developer.here.com">HERE</a>',
      subdomains: '1234',
      app_id: 'DemoAppId01082013GAL',
      app_code: 'AJKnXv84fjrb0KIHawS0Tg',
      variant: 'normal.day'
    };

    L.tileLayer('https://{s}.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/{variant}/{z}/{x}/{y}/256/png8?app_id={app_id}&app_code={app_code}&lg=eng', opts).addTo(mymap);
  });
});

#map {
  height: 250px;
}J

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>

<select id="location" data-placeholder="Enter your address" data-width="100%"></select>

<p><div id="map"></div></p>