代码之家 › 专栏 › 技术社区 › Julia

向此处地图添加信息气泡

infobubble here-api maps javascript

0

Julia · 技术社区 · 6 年前

如何将信息气泡添加到此处地图。我遵循HERE api页面上的步骤,但信息气泡不会弹出。

根据Here api,这里是添加popup的方法。 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 回复 | 直到 6 年前

1

3

leopectus 6 年前

我是理查德,我是这里的一个开发传道者。

您的代码在此行中断:

panorama.setAlignment('top-left');

这一行表示要将StreetLevel UI元素移动到地图的左上角。但是,这个元素不存在,因为您忘记导入 mapsjs-全景.js 图书馆。此库是街道级别功能所必需的。向您的代码中添加以下行,您的代码应该可以工作。

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

还请注意,设置应用程序代码后缺少逗号,并且导入了一些库两次。为了让代码正常工作,您可能还必须解决这些问题。这是你的代码的一个清理版本,它可以做你想做的事情。

<!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>