【问题标题】:Google maps not working in https://谷歌地图在 https:// 中不起作用
【发布时间】:2016-05-07 10:48:16
【问题描述】:

我在 http 上使用谷歌地图,它工作得很好。但是当我安装 ssl 证书时,它停止工作。它给了我错误

混合内容:“https://url”处的页面是通过 HTTPS 加载的,但是 请求了不安全的脚本 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js?_=1***************'。 此请求已被阻止;内容必须通过 HTTPS 提供。

【问题讨论】:

    标签: google-maps ssl google-maps-api-3 https markerclusterer


    【解决方案1】:

    更新:2016 年 5 月 12 日,Google 停用了该库的 google-maps-utility-library-v3.googlecode.com 源。但是,since Google moved the source over to GitHub a while back,请考虑本文末尾介绍的 GitHub 详细信息,特别是关于将脚本和资源直接包含在项目中的最后说明

    除了将您的脚本包含网址更改为:

    http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js
    

    到:

    https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js
    

    在实例化 MarkerClusterer 时,您还需要指定 imagePath 选项:

    var mc = new MarkerClusterer(map, markers, { 
        imagePath: 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m' 
    });
    

    这将避免以下警告,该警告与您突出显示的脚本错误相同:

    混合内容:“https://url”处的页面通过 HTTPS 加载,但请求了不安全的图像“http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png”。此内容也应通过 HTTPS 提供。

    发生这种情况的原因是,默认情况下,MarkerClusterer 库使用以下非 https 设置作为其集群图像(m1.png、m2.png 等)的根:

    MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ =
        'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/' +
        'images/m'
    

    虽然我们不久前遇到过这个问题,但它似乎已在响应库的 GitHub 存储库上的以下拉取请求时得到解决:

    Changed HTTP to HTTPS in image link

    这个GitHub version可以从RawGit使用下面的脚本url访问:

    https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js
    

    以下 imagePath 可用于访问 GitHub 图片:

    var mc = new MarkerClusterer(map, markers, { 
        imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' 
    });
    

    虽然上述网址(带有 cdn 前缀)有 no traffic limits or throttling and the files are served via a super fast global CDN,但请记住 RawGit is a free hosting service and offers no uptime or support guarantees

    以下 SO 答案中对此进行了更详细的介绍:

    Link and execute external JavaScript file hosted on GitHub

    这篇文章还涉及到,如果您要链接到 GitHub 上的文件,在生产中您应该考虑定位特定的发布标签,以确保您获得所需的脚本发布版本。

    但是,由于 js-marker-clusterer 存储库的保管人尚未创建任何版本,因此目前不可能。

    因此,您应该认真考虑下载库及其资源并将其直接包含在您的项目中以用于生产目的。

    【讨论】:

    • 请注意,失败的原因之一是从生产应用程序直接链接到其他人的源代码控制是有风险的。由于这个原因,GitHub 确实支持从他们的 CDN 中包含 JS,并且通过包含另一个级别的间接(例如 cdn.rawgit.com),您正在添加另一个潜在的故障点。在生产应用程序中这样做是非常危险的。请尝试在您自己的基础架构上托管您关心的内容。
    • 您应该下载并链接到本地​​图像,如下所述:stackoverflow.com/a/37499989/782920
    【解决方案2】:

    如果您通过 https 访问您的网站,则它提供的所有内容也必须来自 https。这包括图像、样式表和 JS 脚本。只需将 URL 中的 http 更改为 https 即可。

    【讨论】:

    • 在安装证书并基于此信息后,搜索并替换 http->https,稍后大约 91 个文件......并且......一切正常,谢谢!......最受欢迎的网站已经有了安全连接,这个简单的解决方案确实有效
    【解决方案3】:

    今天遇到Marker集群库的这个问题,所以我不得不从js源文件手动更新images目录,打开markercluster.js

    并替换:

    https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer

    用github中的目录:

    https://googlemaps.github.io/js-marker-clusterer

    你应该没事..

    【讨论】:

      【解决方案4】:

      检查 google maps 的脚本包含 url 并从 url 中删除 http 协议:

      http://google-maps-utility-library-v3.googlecode.com/svn/trunk/mar...
      

      会变成

      //google-maps-utility-library-v3.googlecode.com/svn/trunk/mar...
      

      以这种方式,脚本将使用正确的协议(http 或在您的情况下为 https)提供服务

      【讨论】:

        【解决方案5】:

        只需将 Google http:// 更改为 https://

        http://maps.google.com/https://maps.google.com/

        【讨论】:

          【解决方案6】:

          在头部添加以下元

          <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
          

          解决了我的问题。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2019-12-15
            • 1970-01-01
            • 2015-01-31
            • 1970-01-01
            • 2017-06-12
            相关资源
            最近更新 更多