谷歌地图在 https://中不起作用 [英] Google maps not working in https://

问题描述

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

I am using google maps on http, it is working perfectly fine. But when i installed ssl certificates over the same, it stopped working. It is giving me errors

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

Mixed Content: The page at 'https://url' was loaded over HTTPS, but requested an insecure script 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js?_=1***************'. This request has been blocked; the content must be served over HTTPS.

推荐答案

更新:2016 年 5 月 12 日，Google 停用了 google-maps-utility-library-v3.googlecode.com这个库的来源.但是，因为 Google 将源转移到了 GitHub不久前，请考虑本文末尾介绍的 GitHub 详细信息，特别是关于将脚本和资源直接包含在您的项目中的最后说明

UPDATE: On May the 12th 2016 Google decommissioned the google-maps-utility-library-v3.googlecode.com source for this library. However, since Google moved the source over to GitHub a while back, please consider the GitHub details covered at the end of this post and, in particular, the final note regarding including the script and resources directly in your project

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

In addition to changing your script inclusion url from:

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 选项:

you'll also need to specify the imagePath option when instantiating your MarkerClusterer along the following lines:

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

这将避免以下警告，该警告涵盖与您突出显示的脚本错误相同的内容:

This will avoid the following warning which covers the same ground as the script error you've highlighted:

混合内容:位于https://url"的页面已通过 HTTPS 加载，但请求了不安全的图片http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png'.此内容也应通过 HTTPS 提供.

Mixed Content: The page at 'https://url' was loaded over HTTPS, but requested an insecure image 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png'. This content should also be served over HTTPS.

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

The reason this occurs is that, by default, the MarkerClusterer library uses the following non https setting as the root for its cluster images (m1.png, m2.png etc.):

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

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

Whilst we encountered this issue a while back, it does appear to have been addressed in response to the following pull request on the library's GitHub repository:

将图片链接中的 HTTP 更改为 HTTPS

这个 GitHub 版本可以从 RawGit 使用以下脚本网址:

This GitHub version can be accessed from RawGit by using the following script url:

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

以及以下 imagePath 可用于访问 GitHub 图像:

and the following imagePath can be used to access the GitHub images:

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

虽然上述网址(带有 cdn 前缀)具有 没有流量限制或节流，但文件通过超快速的全球CDN，请记住 RawGit 是一项免费托管服务，不提供正常运行时间或支持保证.

Whilst the above urls (with the cdn prefixes) have no traffic limits or throttling and the files are served via a super fast global CDN, please bear in mind that RawGit is a free hosting service and offers no uptime or support guarantees.

这在以下 SO 答案中有更详细的介绍:

This is covered in more detail in the following SO answer:

链接并执行托管在 GitHub 上的外部 JavaScript 文件

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

但是，由于 js-marker-clusterer 存储库的保管人尚未创建任何版本，因此目前无法实现.

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

这篇关于谷歌地图在 https://中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！