Здесь Карты, как мне добавить новую кнопку пользовательского интерфейса?

Question

У меня по умолчанию установлена ​​интерактивная карта Nokia Here Maps v3, в которой есть несколько маркеров в группе на карте.

Я хотел бы добавить на карту кнопку или другой элемент пользовательского интерфейса, который можно нажиматьи когда он вызывает функцию увеличения масштаба, насколько я могу, вокруг всех маркеров в группе.Однако я не могу найти пример кода добавления нового элемента пользовательского интерфейса, кроме infobubble, или элементов пользовательского интерфейса по умолчанию для карты, которые я не хочу.

То, что я хотел, было что-то вродекнопка панорамы, но в левом верхнем углу карты, которая при нажатии вызывает мою функцию setBounds для уменьшения масштаба, чтобы охватить все маркеры в группе.

Вот мой текущий код JavaScript для моей карты.

// VUE
var vue1 = new Vue({
  el: '#app',
  data: () => ({
      behavior: null,
      centerCoords: { lng: #centerLon#, lat: #centerLat# },
      defaultLayers: null,
      devices: null,
      markerGroup: null,
      map: null,
      platform: null,
      ui: null,
  }),
  created: function(){
    // Initialize the platform object:
    this.platform = new H.service.Platform({
      'app_id': 'AN ID WOULD GO HERE',
      'app_code': 'A CODE WOULD GO HERE'
    });

    this.defaultLayers = this.platform.createDefaultLayers();
  },
  mounted: function(){
    // Instantiate (and display) a map object:
    this.map = new H.Map(
      document.getElementById('mapContainer'),
      this.defaultLayers.satellite.traffic,
      {
          center: this.centerCoords,
          zoom: 15,
      }
    );

    // Make Map interactive
    // MapEvents enables the event system
    // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
    this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

    // Create the default UI Components
    this.ui = H.ui.UI.createDefault(this.map, this.defaultLayers, 'en-US');
    this.ui.setUnitSystem(H.ui.UnitSystem.IMPERIAL);

    this.setMarkers();
    setTimeout(this.setBounds, 250);
    setInterval(this.setMarkers, 1 * 60 * 1000);
  },
  computed:{
  },
  methods:{
      setBounds: function(){
          this.map.setViewBounds(this.markerGroup.getBounds());
      },
      setMarkers: function(){
          let self = this;
          // if already present remove markerGroup from map
          if(self.markerGroup){
              self.markerGroup.removeAll();
          }

          //get request
          $.get(
              '/api/v1/getMarkers',
              data => {
                  let zIndex = 1;
                  self.devices = data;

                  // create new marker group from get request.
                  self.markerGroup = new H.map.Group();

                  // add marker group to the map
                  self.map.addObject(self.markerGroup);

                  // add each marker to the marker group
                  self.devices.forEach((el, ind, arr) => {
                      self.addMarkerToGroup(
                          self.markerGroup,
                          {lat: el.latitude, lng: el.longitude},
                          '<div>' + el.serial + '</div>'
                      );
                  });

                  self.map.addEventListener('tap', evt => {
                      if(evt.target instanceof mapsjs.map.Marker){
                          // increase z-index of the marker that was tapped
                          evt.target.setZIndex(zIndex++);
                      }
                  });

                  self.markerGroup.addEventListener('tap', evt => {
                      let bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
                          content: evt.target.getData()
                      });
                      self.ui.addBubble(bubble);
                  }, false);
              },
              'json'
          );
      },
      addMarkerToGroup: function(group, coordinate, html){
          let marker = new H.map.Marker(coordinate);
          marker.setData(html);
          group.addObject(marker);
      }
  }
});

Answer 1

Вы можете попробовать:

inherits = function(childCtor, parentCtor) {   function tempCtor() {}  tempCtor.prototype = parentCtor.prototype;   childCtor.superClass_ = parentCtor.prototype;   childCtor.prototype = new tempCtor();   childCtor.prototype.constructor = childCtor;   childCtor.base = function(me, methodName, var_args) {
    var args = new Array(arguments.length - 2);
    for (var i = 2; i < arguments.length; i++) {
      args[i - 2] = arguments[i];
    }
    return parentCtor.prototype[methodName].apply(me, args);   }; };

var ZoomTo = function(opt_options) {   'use strict';   var options = opt_options || {};

  H.ui.Control.call(this);   this.onButtonClick = this.onButtonClick.bind(this);

  // create a button element   this.increaseBtn_ = new H.ui.base.Button({
    'label': '<svg class="H_icon H_icon" viewBox="0 0 25 25">' +
      '<path d="M 18.5,11 H 14 V 6.5 c 0,-.8 -.7,-1.5 -1.5,-1.5 -.8,0 -1.5,.7 -1.5,1.5 V 11 H 6' +
      '.5 C 5.7,11 5,11.7 5,12.5 5,13.3 5.7,14 6.5,14 H 11 v 4.5 c 0,.8 .7,1.5 1.5,1.5 .8,0 1.5,' +
      '-.7 1.5,-1.5 V 14 h 4.5 C 19.3,14 20,13.3 20,12.5 20,11.7 19.3,11 18.5,11 z" />' +
      '</svg>',
    'onStateChange': this.onButtonClick   });

  //add the buttons as this control's children   this.addChild(this.increaseBtn_);

  this.setAlignment(options['alignment'] || 'top-right');

  this.options_ = options; }; inherits(ZoomTo, H.ui.Control);

ZoomTo.prototype.onButtonClick = function(evt) {   'use strict';   if (evt.currentTarget.getState() === 'down') {
    console.log('Zoom to the set of markers');   } };

var zoomTo = new ZoomTo(); ui.addControl('zoomToMarkers', zoomTo);