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

似乎正在执行开放式Bubble方法，因为此部分中弹出了所有警报，但ifo气泡似乎没有以任何方式出现。

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

Answer 1

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

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

您在else部分使用了bubble.open（），但在代码部分中没有使用。

根据HERE地图文档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添加信息气泡。

WhereAs

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

希望这有帮助。

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

1 个答案: