Question

我刚刚开始在这里使用此处地图。谷歌地图。该脚本可以使用file：///path/index.html完美运行。但是，当我将其上传到运行HTTPS的服务器时，不会显示该地图。 Firefox控制台告诉我：

Blocked loading mixed active content“http://js.api.here.com/v3/3.0/mapsjs-core.js”[Learn More]

...

在html代码中将“ http”更改为“ https”没有帮助。

这是HTML代码：

<html>
  <head>
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <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>
  </head>
  <body>
      <div style="width: 640px; height: 480px" id="mapContainer"></div>
      <script>
        // Initialize the platform object:
        var platform = new H.service.Platform({
            'app_id': 'myappid',
            'app_code': 'myappcode'
        });

        // Obtain the default map types from the platform object
        var maptypes = platform.createDefaultLayers();

        // Instantiate (and display) a map object:
        var map = new H.Map(
        document.getElementById('mapContainer'),
        maptypes.normal.map,
        {
          zoom: 10,
        });

        // Create a marker consisting of a blue "M"
        var svgMarkup = '<svg width="24" height="24" ' +
             'xmlns="http://www.w3.org/2000/svg">' +
             '<rect stroke="white" fill="#a2ccff" x="1" y="1" width="22" ' +
             'height="22" /><text x="12" y="18" font-size="12pt" ' +
             'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
             'fill="white">M</text></svg>';

        // Create an icon, an object holding the latitude and longitude, and a marker:
        var icon = new H.map.Icon(svgMarkup),
            coords = {lat: 52.5, lng: 13.4},
            marker = new H.map.Marker(coords, {icon: icon});

        // Add the marker to the map and center the map at the location of the marker:
        map.addObject(marker);
        map.setCenter(coords);
    </script>
  </body>
</html>

Answer 1

也许整个例子可能太多了。上面代码的主要问题是，还需要通过https加载JS API：

<head>

    <title>Simple HERE Map Display</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="/assets/hereAccount-21ef8922d5d04b494504bc6295d247bc781e0cf2542e5d071c63dd282590abdb.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css">
    <script src="https://account.here.com/js/sdk/sso.min.js"></script>

    <script>
        var app_id = "here goes your key",
            app_code = "here goes your key";
    </script>

        <script type="text/javascript" charset="UTF-8" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
        <script type="text/javascript" charset="UTF-8" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
        <script type="text/javascript" charset="UTF-8" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
    [...]

这里的地图没有显示在HTTPS页面上

1 个答案: