javascript - 这里的信息气泡 map 不起作用

Question

我一直在尝试弹出一个信息气泡，但它根本没有弹出，也没有抛出任何错误。我在下面的代码中遗漏了什么吗？

index.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>

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

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

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

Answer 1

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

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

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

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

addBubble(气泡)此方法向 UI 中添加信息气泡。

哪里

open()(对于 H.ui.InfoBubble)此方法打开信息气泡(将其状态设置为“打开”)。

希望这有帮助。