Javascript 信息气泡在这里地图不工作

我一直试图弹出一个信息气泡，但它根本没有弹出，也没有抛出错误。以下代码中是否缺少任何内容

index.html

Controller.js

似乎正在执行OpenBubble方法，因为本节中会弹出所有警报，但ifo Bubble似乎不会以任何方式出现

---

有人知道这段代码为什么会这样吗？

@Kailas，在openBubble函数中，在您将bubble添加到ui ui之后。addBubble添加以下行。 泡泡，打开

这应该开始在地图上实际显示气泡

您在代码的else部分使用了bubble.open，但在if部分没有使用

根据这里的地图文档

添加气泡 此方法将信息气泡添加到UI

鉴于

为H.ui.InfoBubble打开 此方法打开信息气泡，并将其状态设置为“打开”

希望这有帮助

<!-- Loading here maps -->
<script type="text/javascript" charset="UTF-8"
    src="http://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
        <script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
        <script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
        <script type="text/javascript"  charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>

$scope.plotMarker = function(lat,lon, location){

//Step 1: initialize communication with the platform
  var platform = new H.service.Platform({
   app_id: '<your App id>',
   app_code: '<Your App code',
   // useCIT: true // I really wish to know what this useCIT stands for
 });

 var defaultLayers = platform.createDefaultLayers();

 //Step 2: initialize a map  - not specificing a location will give a whole world view.
 var map = new H.Map(document.getElementById('map_canvas'),
          defaultLayers.normal.map);

 //Step 3: make the map interactive
 // 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 the default UI components
 ui = H.ui.UI.createDefault(map, defaultLayers);
 // Now use the map as required...
 moveMapToBerlin(map, lat, lon);
};

     /**
     * Moves the map to display over Berlin
     *
     * @param  {H.Map} map      A HERE Map instance within the application
     */
    function moveMapToBerlin(map, lat, lon){

      map.setCenter({lat:lat, lng:lon});
      map.setZoom(14);
      // Create a marker icon from an image URL:
      var icon = new H.map.Icon('images/redpin.png');

      // Create a marker using the previously instantiated icon:
      var marker = new H.map.Marker({ lat: lat, lng: lon }, { icon: icon });

      // Add the marker to the map:
      map.addObject(marker);
      // alert(map.getZoomLevel());
       map.addEventListener('tap', function (evt) {
             map.setCenter(evt.target.getPosition());

    openBubble({lng: lon, lat: lat}, '<b>Hello World!</b>');

    // $( '.H_ib' ).css( "font-size", "12px" );
    // $( '.H_ib_content' ).css( "min-width", "290px" );
    // $( '.H_ib_content' ).css( "font", "12px/14px 'Helvetica Neue',Arial,Helvetica,sans-serif" );
     }, false);
  }

    /**
     * Opens/Closes a infobubble
     * @param  {H.geo.Point} position     The location on the map.
     * @param  {String} text              The contents of the infobubble.
     */
    function openBubble(position, text){
        alert(bubble);
     if(!bubble){
        bubble =  new H.ui.InfoBubble(
          position,
          {content: text});
        ui.addBubble(bubble);
        alert(angular.toJson(position));
      } else {
        bubble.setPosition(position);
        bubble.setContent(text);
        bubble.open();
      }
    }