这里地图信息气泡 -

如何解决这里地图信息气泡 -

我在我的 Vue.js 应用程序中使用 HereMap（这里是 HereMap 代码 https://developer.here.com/tutorials/how-to-implement-a-web-map-using-vuejs/ 的链接）。下一步是将 InfoBubble 插入到这个地图中（这里是将 infobubble 插入到 heremap https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble 中的代码）。问题是： infobubble 出现在地图上，但是当我尝试单击 infobubble 时（目前，它具有我指定的静态位置），infobubble 没有显示任何信息。它没有打开……它只是地图上的一个静态标记，没有任何其他功能。这是我单击它时可以在控制台中看到的错误：“未捕获的类型错误：this.ui 未定义” 无论如何，ui 是在我的代码中定义的。这是我的代码：（非常感谢您的帮助！）

export default {
  name: "MapContainer",props: {
    center: Object
  },data() {
    return {
      platform: null,apikey:"AuXyuAIzhpLcZgo4JTieWmGjl1BwTvP0u4SbRQl8r9U",map: null,ui: {}
    };
  },mounted() {
    // Initialize the platform object:
    const platform = new window.H.service.Platform({
      apikey: this.apikey
    });
    this.platform = platform;
    this.initializeHereMap()
    this.addInfoBubble()
    
  },methods: {
    initializeHereMap() { // rendering maphhhh

      const mapContainer = this.$refs.hereMap;
      const H = window.H;
      // Obtain the default map types from the platform object
      var maptypes = this.platform.createDefaultLayers();

      // Instantiate (and display) a map object:
      this.map = new H.Map(mapContainer,maptypes.vector.normal.map,{
        zoom: 15.15,center: this.center
      });

      addEventListener("resize",() => this.map.getViewPort().resize());

      // add behavior control
      new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

      // add UI
      this.ui = H.ui.UI.createDefault(this.map,maptypes) 
      
      // End rendering the initial map
    },addMarkerToGroup(group,coordinate,html) {
      var marker = new H.map.Marker(coordinate);
      // add custom data to the marker
      marker.setData(html);
      group.addobject(marker);
    },addInfoBubble() {
      var group = new H.map.Group();

      this.map.addobject(group);

      // add 'tap' event listener,that opens info bubble,to the group
      group.addEventListener('tap',function (evt) {
        // event target is the marker itself,group is a parent event target
        // for all objects that it contains
        console.log("Click Listen")
        var bubble = new H.ui.InfoBubble(evt.target.getGeometry(),{
          // read custom data
          content: evt.target.getData()
          });
          console.log(bubble)
        // show info bubble
        this.ui.addBubble(bubble);
        
      },false);

      this.addMarkerToGroup(group,{lat: 40.7679,lng: 14.0200},'<div><a href="https://www.mcfc.co.uk">Manchester City</a></div>' +
      '<div>City of Manchester Stadium<br />Capacity: 55,097</div>');

    }






  }
};

解决方法

您需要在函数内部代理 this 或使用 =>。所以改变这部分：

group.addEventListener('tap',function (evt) {

到

group.addEventListener('tap',(evt)=> {

然后代码就可以工作了。