这里地图中的信息气泡不起作用

Question

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

索引.html

<!-- 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>

控制器.js

$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();
      }
    }

似乎

正在执行打开的气泡方法，因为本节中会弹出所有警报，但ifo气泡似乎没有以任何方式出现。

有没有人知道为什么这段代码会表现得如此？

Answer 1

@Kailas ，在 openBubble 函数中，将气泡添加到 ui （ui.addBubble） 后添加以下行。bubble.open（）;

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

你在 else 部分使用了 bubble.open（），但在代码的 if 部分没有。

根据HERE地图文档 https://developer.here.com/documentation/download/maps_js_html5_nlp/3.0.5/Maps%20API%20for%20JavaScript%20v3.0.5%20Developer%27s%20Guide.pdfhere，

添加气泡（气泡）此方法向 UI 添加信息气泡。

而

open（） （for H.ui.InfoBubble）此方法打开信息气泡（将其状态设置为 OPEN）。

希望这有帮助。