如何在 InfoBubble 中调用外部点击事件 - 这里 API Javascript 3

Question

我创建了一个 InfoBubble，我想调用一个 jJvascript 事件来做一些事情，比如与另一个标记交互，但在 infoBubble 内部，我不知道如何创建一个将在外部调用事件的函数。

我尝试在 infoBubble 中调用按钮上的函数 myAlert()，但是没有用。

function myAlert() {
         alert('Hellow InfoBubble')
}
    coords.forEach(value => {
            addMarkerToGroup(group, value,
            '<div class="info-box">' +
            '<div class="header-bar">' +
            '<div class="d-flex justify-content-center">' +
            '<div role="group" class="btn-group">' +
                '<div role="group" class="btn-group btn-group-sm"><button type="button" class="btn btn-info">Mais Info.</button><button type="button" class="btn btn btn-warning">Alt. Status</button><button type="button" class="btn btn-success">Assumir Viagem</button></div>' +
            '</div> <!-- /align-items-->' +
            '</div> <!-- /action-bar-->' +
            '<p><b>MOTORISTA:</b> João Fagner</p>' +
            '<p><b>CPF:</b> 999.999-6</p>' +
            '<p><b>VEICULO:</b> Scania P310 bitruk com Carreta</p>' +
            '<p><b>PLACA:</b> XYZ666</p>' +
            '<p><b>OPERADOR:</b> Fabio</p>' +
            '<p><b>STATUS:</b> 1 em rota</p>' +
            '<div class="action-bar">' +
            '<div class="d-flex justify-content-center">' +
            '<div role="group" class="btn-group">' +
                '<div role="group" class="btn-group btn-group-sm"><button type="button" onCLick="myAlert()" class="btn btn-info">Mais Info.</button><button type="button" class="btn btn btn-warning">Alt. Status</button><button type="button" class="btn btn-success">Assumir Viagem</button></div>' +
            '</div> <!-- /align-items-->' +
            '</div> <!-- /action-bar-->' +
            '</div> <!-- /info-box-->'
            
            );
    });

Answer 1

您可以像编写任何其他 Javascript 代码一样编写您的函数。下面是片段。

用于添加标记

  addMarkerToGroup(group, {lat:53.439, lng:-2.221},
    '<div><a href=\'http://www.mcfc.co.uk\' >Manchester City</a>' +
    '**<button onclick="myFunction()">Click me</button>**' +
    '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');

我的函数定义

function myFunction() {
  alert('Hello World');
}

完整代码：

Opening an Infobubble on a Mouse Click

Open an infobubble when a marker is clicked

This example displays a map with two markers showing the position of Liverpool and Manchester City football clubs. Clicking on a marker opens an infobubble which holds HTML content related to the marker.
Code

Infobubble opens on tap event, event delegation is used to add event listener to the group that holds markers. setData/getData methods on the map objects are used to bind custom data.

    JavaScript
    JS + HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

</head>
<body>
  <div id="map" style="width: 100%; height: 400px; background: grey" />
  <script  type="text/javascript" charset="UTF-8" >

/**
 * Creates a new marker and adds it to a group
 * @param {H.map.Group} group       The group holding the new marker
 * @param {H.geo.Point} coordinate  The location of the marker
 * @param {String} html             Data associated with the marker
 */
function addMarkerToGroup(group, coordinate, html) {
  var marker = new H.map.Marker(coordinate);
  // add custom data to the marker
  marker.setData(html);
  group.addObject(marker);
}

/**
 * Add two markers showing the position of Liverpool and Manchester City football clubs.
 * Clicking on a marker opens an infobubble which holds HTML content related to the marker.
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function addInfoBubble(map) {
  var group = new H.map.Group();

  map.addObject(group);

  // add 'tap' event listener, that opens info bubble, to the group
  var OpenBubble = function (evt) {
    // event target is the marker itself, group is a parent event target
    // for all objects that it contains

    var bubble =  new H.ui.InfoBubble(evt.target.getPosition(), {
      // read custom data
      content: evt.target.getData()
    });
    //alert(evt.target.getParentGroup().getParentGroup().setCenter(evt.target.getPosition()));
    //alert(map);
    map.setCenter(evt.target.getPosition(), true);
    //map.setCenter(evt.target.getPosition());
    // show info bubble
    ui.addBubble(bubble);
  }

  group.addEventListener('tap', OpenBubble, false);

  addMarkerToGroup(group, {lat:53.439, lng:-2.221},
    '<div><a href=\'http://www.mcfc.co.uk\' >Manchester City</a>' +
    '<button onclick="myFunction()">Click me</button>' +
    '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');

  addMarkerToGroup(group, {lat:53.430, lng:-2.961},
    '<div ><a href=\'http://www.liverpoolfc.tv\' >Liverpool</a>' +
    '</div><div >Anfield<br>Capacity: 45,362</div>');

}
function myFunction() {
  alert('Hello World');
}



/**
 * Boilerplate map initialization code starts below:
 */

// initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'YOUR-APP-ID',
  app_code: 'YOUR-APP-CODE',
  useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
  tileSize: pixelRatio === 1 ? 256 : 512,
  ppi: pixelRatio === 1 ? undefined : 320
});

// initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
  defaultLayers.normal.map,{
  center: {lat: 53.430, lng: -2.961},
  zoom: 7,
  pixelRatio: pixelRatio
});

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

// create default UI with layers provided by the platform
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Now use the map as required...
addInfoBubble(map);
  </script>
</body>
</html>

如何在 InfoBubble 中调用外部点击事件 - 这里 API Javascript 3

How to call a external click event inside InfoBubble - here API Javascript 3

javascript

dom-events

here-api