使用 HERE 地图根据 text/address 输入更改标记

Question

我正在使用 HERE 地图插件，我需要根据 address/text 输入更改标记位置。我在互联网上寻找示例，但没有找到。使用这个插件甚至可以做这样的事情吗？可能有人可以指出，我必须在哪里看，或者可能有人有工作的例子？任何帮助表示赞赏。 “Google 地图”中使用了类似的东西 https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Answer 1

您可以在 https://developer.here.com/documentation/examples/maps-js/services/geocode-a-location-from-address

找到“根据地址搜索位置”的文档

工作示例可在 https://jsfiddle.net/4Lodwfb3/ - 使用 free-form 文本输入请求位置并在地图上显示标记。

    function geocode(platform) {
  var geocoder = platform.getSearchService(),
      geocodingParameters = {
        q: '200 S Mathilda Sunnyvale CA'
      };

  geocoder.geocode(
    geocodingParameters,
    onSuccess,
    onError
  );
}
function onSuccess(result) {
  var locations = result.items;
 addLocationsToMap(locations);
  addLocationsToPanel(locations);
}
function onError(error) {
  alert('Can\'t reach the remote server');
}
var platform = new H.service.Platform({
  apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map,{
  center: {lat:37.376, lng:-122.034},
  zoom: 15,
  pixelRatio: window.devicePixelRatio || 1
});
window.addEventListener('resize', () => map.getViewPort().resize());

var locationsContainer = document.getElementById('panel');
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
var bubble;
function openBubble(position, text){
 if(!bubble){
    bubble =  new H.ui.InfoBubble(
      position,
      {content: text});
    ui.addBubble(bubble);
  } else {
    bubble.setPosition(position);
    bubble.setContent(text);
    bubble.open();
  }
}
function addLocationsToPanel(locations){

  var nodeOL = document.createElement('ul'),
      i;

  nodeOL.style.fontSize = 'small';
  nodeOL.style.marginLeft ='5%';
  nodeOL.style.marginRight ='5%';


   for (i = 0;  i < locations.length; i += 1) {
     let location = locations[i];
     var li = document.createElement('li'),
          divLabel = document.createElement('div'),
          address = location.address,
          content =  '<strong style="font-size: large;">' + address.label  + '</strong></br>';
          position = location.position;

      content += '<strong>houseNumber:</strong> ' + address.houseNumber + '<br/>';
      content += '<strong>street:</strong> '  + address.street + '<br/>';
      content += '<strong>district:</strong> '  + address.district + '<br/>';
      content += '<strong>city:</strong> ' + address.city + '<br/>';
      content += '<strong>postalCode:</strong> ' + address.postalCode + '<br/>';
      content += '<strong>county:</strong> ' + address.county + '<br/>';
      content += '<strong>country:</strong> ' + address.countryName + '<br/>';
      content += '<strong>position:</strong> ' +
        Math.abs(position.lat.toFixed(4)) + ((position.lat > 0) ? 'N' : 'S') +
        ' ' + Math.abs(position.lng.toFixed(4)) + ((position.lng > 0) ? 'E' : 'W') + '<br/>';

      divLabel.innerHTML = content;
      li.appendChild(divLabel);

      nodeOL.appendChild(li);
  }

  locationsContainer.appendChild(nodeOL);
}
for (i = 0;  i < locations.length; i += 1) {
    let location = locations[i];
    marker = new H.map.Marker(location.position);
    marker.label = location.address.label;
    group.addObject(marker);
  }

  group.addEventListener('tap', function (evt) {
    map.setCenter(evt.target.getGeometry());
    openBubble(
       evt.target.getGeometry(), evt.target.label);
  }, false);

  map.addObject(group);
  map.setCenter(group.getBoundingBox().getCenter());
}

geocode(platform);

使用 HERE 地图根据 text/address 输入更改标记

Marker change based on text/address input using HERE map

here-api

heremaps