向此处地图添加信息气泡

Question

如何向 HERE 地图添加信息气泡。我按照此处 api 页面上的步骤操作，但没有弹出信息气泡。

根据这里api，这里是添加弹窗的方法。 https://developer.here.com/documentation/maps/topics/map-controls.html

var bubble = new H.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
        content: '<b>Hello World!</b>'
       });

// Add info bubble to the UI:
ui.addBubble(bubble);

我按照代码进行操作，地图正确加载了正确的坐标，但我没有在地图上看到任何信息气泡。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, 
      width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js"  type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
  </head>
<body>
  <div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="utf-8">
  //Initialize the Platform object:
    var platform = new H.service.Platform({
    'app_id': '{YOUR_APP_ID} ',
    'app_code': '{YOUR_APP_CODE} '
      useHTTPS: true
    });
    var pixelRatio = window.devicePixelRatio || 1;
    var defaultLayers = platform.createDefaultLayers({
      tileSize: pixelRatio === 1 ? 256 : 512,
      ppi: pixelRatio === 1 ? undefined : 320
    });

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

    //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));

  // Get the default map types from the Platform object:

        map.setCenter({lng: 13.4, lat: 52.51});
    map.setZoom(10);
  // Instantiate the map:


  // Create the default UI:
  var ui = H.ui.UI.createDefault(map, defaultLayers, 'de-DE');
  var mapSettings = ui.getControl('mapsettings');
var zoom = ui.getControl('zoom');
var scalebar = ui.getControl('scalebar');
var panorama = ui.getControl('panorama');

panorama.setAlignment('top-left');
mapSettings.setAlignment('top-left');
zoom.setAlignment('top-left');
scalebar.setAlignment('top-left');
var bubble = new H.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
        content: '<b>Hello World!</b>'
       });

// Add info bubble to the UI:
ui.addBubble(bubble);
</script>


</body>
</html>

Answer 1

我是 Richard，我是 HERE 的开发人员布道师。

您的代码在这一行中断：

panorama.setAlignment('top-left');

此行表示您要将 StreetLevel UI 元素移动到地图的左上角。但是，此元素不存在，因为您忘记导入 mapsjs-pano.js 库。 StreetLevel 功能需要此库。将以下行添加到您的代码中，您的代码应该可以工作。

<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-pano.js"></script>

另请注意，您在设置 app_code 后缺少一个逗号，并且您导入了一些库两次。您可能还必须解决这些问题才能使您的代码正常工作。这是您的代码的清理版本，可以执行您想要执行的操作。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
        <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-pano.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 400px; background: grey" />
        <script  type="text/javascript" charset="UTF-8" >

            function createInfoBubble(map) {
                // Create info bubble
                var bubble = new H.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
                    content: '<b>Hello World!</b>'
                });
                // Add info bubble to the UI:
                ui.addBubble(bubble);
            }

            // Step 1: initialize the platform
            var platform = new H.service.Platform({
                app_id: '{YOUR_APP_ID}',
                app_code: '{YOUR_APP_CODE}',
                useHTTPS: true
            });

            var pixelRatio = window.devicePixelRatio || 1;
            var defaultLayers = platform.createDefaultLayers({
                tileSize: pixelRatio === 1 ? 256 : 512,
                ppi: pixelRatio === 1 ? undefined : 320
            });

            // Step 2: initialize a map
            var map = new H.Map(document.getElementById('map'),
                defaultLayers.normal.map, {pixelRatio: pixelRatio});

            // Step 3: make the map interactive            
            var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

            // Step 4: create the default UI components
            var ui = H.ui.UI.createDefault(map, defaultLayers);

            // Move UI elements to the top left of the map
            var mapSettings = ui.getControl('mapsettings');
            var zoom = ui.getControl('zoom');
            var scalebar = ui.getControl('scalebar');
            var panorama = ui.getControl('panorama');

            panorama.setAlignment('top-right');
            mapSettings.setAlignment('top-left');
            zoom.setAlignment('top-left');
            scalebar.setAlignment('top-left');

            // Move map to Berlin
            map.setCenter({lat:52.5159, lng:13.3777});
            map.setZoom(14);

            createInfoBubble(map);
        </script>
    </body>
</html>

向此处地图添加信息气泡

Add Info Bubbles to Here Maps

javascript

maps

here-api

infobubble