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

时间：2018-08-07 15:02:08

标签： javascript maps here-api infobubble

如何将信息气泡添加到此处地图。我按照此处的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>

1 个答案:

答案 0 :(得分：2)

我是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>
相关问题
最新问题