HERE 地图信息气泡 -

Question

我在我的 Vue.js 应用程序中使用 HereMap（此处 link 用于 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）。问题是：信息气泡出现在地图上，但是当我尝试单击信息气泡时（目前，它具有我分配的静态位置），信息气泡不显示任何信息。它打不开……它只是地图上的一个静态标记，没有任何其他功能。这是我单击它时可以在控制台中看到的错误：“Uncaught TypeError: 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)=> {

然后代码就可以工作了。

HERE 地图信息气泡 -

HERE Map InfoBubble -

javascript

vue.js

heremaps