Блог

Главная - Вопросы по программированию - Добавление html-текста в H.map.DomMarker

Добавление html-текста в H.map.DomMarker

#javascript #here-api

#javascript #здесь-api

Вопрос:

Я хочу добавить текст к маркеру. У меня есть переменная с атрибутом «text», который я хочу отобразить в маркере, когда он появится на карте.

  var baseLat = baseLocation.lat;
 var baseLng = baseLocation.lng;
 var basePoint = new H.geo.IPoint( baseLat , baseLng );

 var baseMarker = new H.map.DomMarker( basePoint );
 var markerHTML = '<div class="px_marker">'    baseLocation.text   '</div>';
 baseMarker.setZIndex(1);
 baseMarker.setData(markerHTML);
 domGroup.addObject(baseMarker);

baseLocation.text = «тест»

Я бы ожидал увидеть маркер со словом «test»

Ответ №1:

При создании объекта map вы можете указать координаты и значок в качестве параметров, а в icon вы можете встроить как текст, так и анимацию, если требуется.

пожалуйста, обратитесь к следующему примеру, который иллюстрирует то же требование

developer.here.com/api-explorer/maps-js/v3.0/markers/map-with-dom-marker

Также небольшой фрагмент кода, который мог бы помочь .. приятного кодирования ..!!

 <html> 
 <script>

  // Initialize the platform object:
   var platform = new H.service.Platform({
   'app_id': ‘xxxxxxxxxx’,
   'app_code': ‘yyyyyyyyyyy’
   });


// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();

// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
  zoom: 10,
  center: { lng: 13.4, lat: 52.51 }
});

// Define a variable holding SVG mark-up that defines an animated icon image:

 var markerHTML = '<div>'   "text"   '</div>';

 // Create an icon object, an object with geographic coordinates and a marker:

 var icon = new H.map.DomIcon(markerHTML),
 coords = {lat: -22.8906, lng: -43.2283},
 baseMarker = new H.map.DomMarker(coords, {icon: icon});

 // Set map center and zoom, add the marker to the map:
 map.setCenter(coords);
 map.setZoom(18);
 map.addObject(baseMarker);
 </script>
 </html>