我用过Google Maps Clustering它的工作符合我的期望。
但是,我在 MarkerClusterer
- imagePath
中面临一个奇怪的问题。当我设置这个时..
imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
它工作正常。但是当我这样做时..
var imgpath = '<?= SITE_ROOT_IMAGE_DEFAULT ; ?>m3.png';
imagePath: imgpath,
并提醒它给我正确的相对路径,/var/www/html/my-app/webroot/img/m3.png
,我在其中下载了此图像。但它不起作用。
我还尝试通过http
添加。
imagePath: 'http://localhost/my-app/img/m3.png',
我可以看到我的图像,但它不起作用。
仅供引用,我还在本地服务器中下载了 markerclusterer.js
库,并仅从本地服务器请求它。我正在使用 Cakephp 3.x folder structure .
我也尝试过不同的方式,比如..
imagePath: "../img/m",
但它也不起作用。
有人可以指导我在这里做错了什么吗?为什么我的 imagePath
没有被占用?
最佳答案
阅读the documentation ,它说:要使用您自己的自定义集群图像,只需将图像命名为 m[1-5].png
或将 imagePath 选项设置为图像的位置和名称,如下所示:imagePath: 'customImages/cat'
用于图像 cat1.png
到 cat5.png
。
您应该使用声明此路径的文件的相对路径。
这是一个示例文件夹结构:
- cluster_images
- m1.png
- m2.png
- m3.png
- m4.png
- m5.png
- main.js
如果您在具有上述文件夹结构的文件 main.js
中声明 imagePath
,那么它应该是:
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'cluster_images/m'});
编辑:
如果您想单独为每个图像设置样式并定义图像大小,则应使用 styles
参数并单独声明每个群集图标。
mcOptions = {
styles: [{
height: 53,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m1.png",
width: 53
},
{
height: 56,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m2.png",
width: 56
},
{
height: 66,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m3.png",
width: 66
},
{
height: 78,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m4.png",
width: 78
},
{
height: 90,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m5.png",
width: 90
}
]
}
//init clusterer with your options
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
以上代码使用默认图像。再次将 URL 替换为每个图像的相对路径,并更新尺寸以避免图像拉伸(stretch)。
关于javascript - Google Maps API imagePath 本地镜像无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54344199/