代码之家 › 专栏 › 技术社区 › Mittul At TechnoBrave

谷歌地图API ImagePath本地图像不工作

google-maps-markers google-maps-api-3 google-maps php javascript

0

Mittul At TechnoBrave · 技术社区 · 7 年前

我已经用过 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 我在哪里下载了这张图片。但它不起作用。

我也尝试过添加via http .

imagePath: 'http://localhost/my-app/img/m3.png',

我可以看到我的形象,但它也不起作用。

仅供参考,我也下载了我的 markerclusterer.js 我的本地服务器中的库,并仅从本地请求它。我正在使用 Cakephp 3.x folder structure .

我也尝试过不同的方法,比如……

imagePath: "../img/m", 但它也不起作用。

有人能指导我在这里做错了什么吗?为什么我 意象派 没有被带走吗?

1 回复 | 直到 7 年前

1

MrUpsidown 7 年前

阅读 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再次替换为 相对路径 对每个图像更新大小以避免图像拉伸。