个人中心
gpt4 book ai didi

javascript - 如何在 InfoBubble 内调用外部点击事件 - 此处 API Javascript 3

转载 作者：行者123 更新时间：2023-12-03 01:28:16 25 4
gpt4 key购买 nike

我创建了一个 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-->'
            
            );
    });

最佳答案

您可以像编写任何其他 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>');

myFunction 定义

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>

关于javascript - 如何在 InfoBubble 内调用外部点击事件 - 此处 API Javascript 3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51410559/

25 4 0
文章推荐： javascript - 以 csv 文件作为数据库的 Reactjs 网页
文章推荐： javascript - 禁用“提交”按钮，直到填写字段
文章推荐： javascript - 现代版本 EXT JS 6.2.0 中的 loadRecord() 方法
文章推荐： r - R Shiny 中有全局变量吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com