ImageMap in SAPUI5

Question

我正试图在ImageMap的SAPUI5中获得乐趣。

我已经做了html和core:html标记--它工作得很好，我可以按下我感兴趣的区域，但是它没有解决我的问题，因为我无法在特定的区域上创建自定义的新闻事件。

我需要执行不同的行动，取决于哪个部分的形象，有人点击。

我想知道ImageMap和UI5中的面积是否相等(它在sap.ui.commons中，但是那个库是折旧的)。

Answer 1

可以通过将Click侦听器和自定义数据附加到area标记来实现

• 使用自定义类(areaMap)和自定义数据( data )对area标记使用XML视图

XML视图

<l:VerticalLayout class="sapUiContentPadding" width="100%">
  <l:content>
    <core:HTML content='&lt;img usemap="#aus-nz" src="assets/images/map.gif" width="200" height="142" alt="Map of Australia & New Zealand"&gt; &lt;map name="aus-nz"&gt;
      &lt;area class="areaMap" shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" data-areaSelected="Aus" alt="Australia"&gt;
      &lt;area class="areaMap" shape="poly" coords="180,85,200,98,167,142,157,138" data-areaSelected="NewZld" alt="New Zealand"&gt;
    &lt;/map&gt;' />
  </l:content>
</l:VerticalLayout>

• 将单击事件侦听器初始化为区域标记，一旦单击该区域，将使用相应的区域自定义数据来执行该操作。

Controller.js

onAfterRendering: function() {
  this.initializeEventListener(this); 
},
initializeEventListener: function(that) {
  const aAreas = document.querySelectorAll('area.areaMap');
  aAreas.forEach(elem => elem.addEventListener('click', function(oEvent) { //Attach click event listener to areas
    that.takeAction(that, oEvent.target.dataset.areaselected);
  }));
},
takeAction: function(that, selectedArea) {
    //Your code 
},