这里地图，我如何添加一个新的用户界面按钮

Question

我有一个默认的交互式诺基亚Here Maps v3地图设置，它在地图上的一组中有多个标记。

我想在地图上添加一个可以按下的按钮或其他ui元素，当它调用一个函数时，我会在组中的所有标记周围尽可能缩小。然而，除了infobubble或映射的默认ui元素之外，我找不到任何添加新ui元素的示例代码，这是我不想要的。

我想要的是类似于pano按钮的东西，但在地图的左上角，当点击它时，会调用我的setBounds函数来缩小以包含gorup中的所有标记。

这是我当前地图的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);