这里是地图InfoBubble -

Question

我在我的Vue.js应用程序中使用HereMap (这里是HereMap代码https://developer.here.com/tutorials/how-to-implement-a-web-map-using-vuejs/的链接)。下一步是将InfoBubble插入到此映射中(此处是将infohttps://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble插入到heremap https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble中的代码)。问题是:信息气泡出现在地图上，但当我尝试点击信息气泡(目前，它有一个由我分配的静态位置)时，信息气泡没有显示任何信息。它打不开...它只是地图上的一个静态标记，没有任何其他功能。这是我可以在控制台中看到的错误，当我单击它时："Uncaught : this.ui is undefined“，不管怎样，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>');

    }






  }
};

Answer 1

您需要在函数内代理this或使用=>。因此，更改这一部分：

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

至

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

然后代码就可以工作了。