如何使用 Google Maps Marker Clusterer Plus 避免混合内容警告

Question

当您的网站通过 HTTPS 加载时，Google Maps Marker Clusterer Plus 默认图标仍通过纯 HTTP 加载

这会触发来自大多数浏览器的 "mixed content" 警告

Answer 1

只需添加这一行：

MarkerClusterer.IMAGE_PATH = "https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/m";

在调用您的 Google Maps Marker Clusterer Plus 之前：

var markerCluster = new MarkerClusterer(map, allMarkersArray, mcOptions);

Answer 2

您还可以通过在实例化 MarkerClusterer 时指定 imagePath 选项以与类似的方式解决此问题（如下所示）：

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

更新： 由于 Google moved the MarkerClustererPlus source over to GitHub 不久前，Google 代码版本现已停产，您应该使用新的 GitHub 托管版本，使用以下脚本 url 之一（标准和打包版本）：

https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js
https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js

在实例化 MarkerClusterer 时，您还需要将 imagePath 选项定向到新的托管位置，如下所示：

var mc = new MarkerClusterer(map, markers, { 
    imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m' 
});

在生产中，应使用上述 url（带有 cdn 前缀），因为它们具有 no traffic limits or throttling and the files are served via a super fast global CDN. However please bear in mind that, as a free service, it offers no uptime or support guarantees.

访问从 Git 托管的文件在以下 SO 回答中有更详细的介绍：

Link and execute external JavaScript file hosted on GitHub

如何使用 Google Maps Marker Clusterer Plus 避免混合内容警告

How to avoid mixed content warnings with Google Maps Marker Clusterer Plus

google-maps

https

google-maps-markers

markerclusterer