javascript - Google Maps API imagePath本地镜像不起作用

我按照我的期望使用了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

如果使用上述文件夹结构在文件imagePath中声明main.js，则它应为：

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，并更新大小以避免图像拉伸。

关于javascript - Google Maps API imagePath本地镜像不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54344199/