Google 地图 API imagePath 本地图像不工作

Question

我已经使用了 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 没有被占用？

Answer 1

阅读 the documentation，它说：要使用您自己的自定义集群图像，只需命名您的图像 m[1-5].png 或将 imagePath 选项设置为图像的位置和名称，例如this: imagePath: 'customImages/cat' for images cat1.png to 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 替换为每个图像的 相对路径 并更新大小以避免图像拉伸。

Google 地图 API imagePath 本地图像不工作

Google Maps API imagePath local image not working

javascript

php

google-maps

google-maps-api-3

google-maps-markers