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

Question

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

这会触发大多数浏览器的“混合内容”警告

Answer 1

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

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 代码版本现已停产，您应该使用以下脚本 URL 之一来使用新的 GitHub 托管版本（标准和打包版本）：

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。但是请记住，作为一项免费服务，它提供no uptime or support guarantees。

以下 SO 答案更详细地介绍了访问从 Git 托管的文件：

Link and execute external JavaScript file hosted on GitHub

Answer 2

只需添加这一行：

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);