将信息气泡添加到此处的地图答案

【问题标题】：Add Info Bubbles to Here Maps将信息气泡添加到此处的地图
【发布时间】：2020-04-29 09:04:55
【问题描述】：

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

根据Here 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>

【问题讨论】：

标签： javascript maps here-api infobubble

【解决方案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>

【讨论】：

“我是 HERE 的开发者宣传员。”如果是这样的话，你能告诉开发团队信息泡泡不应该覆盖标记吗？如果您将标记和气泡设置到相同的位置（气泡提供有关标记的信息），则气泡位于标记之前。应该有一个 z 顺序设置，因此气泡位于标记的后面。您可以在官方示例中看到问题，如果您单击标记以显示其信息气泡：developer.here.com/api-explorer/maps-js/v3.0/infoBubbles/… 气泡隐藏了标记，如果您放大它，它会一直隐藏它。
嗨，Tom，感谢您的反馈，我会将其转发给团队。我可以说我们正在积极努力在我们即将发布的版本中改进 InfoBubble。
谢谢，这行得通。有没有办法让默认的蓝色标记变大？
我不认为您可以更改默认图标的大小，但您可以简单地使用自己的图像（SVG 或位图），如下所示： var icon = new H.map.Icon( '更大的图标.png'); var marker = new H.map.Marker({ lat: 52.5, lng: 13.4 }, { icon: icon }); map.addObject(marker);
嗨，Tom，有没有办法在 Android 中添加 InfoBubbles？