Google Maps API imagePath 本地图像不起作用
Posted
技术标签:
【中文标题】Google Maps API imagePath 本地图像不起作用【英文标题】:Google Maps API imagePath local image not working 【发布时间】:2019-06-18 01:03:43 【问题描述】:我使用了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
没有被占用?
【问题讨论】:
【参考方案1】:阅读the documentation,它说:要使用您自己的自定义集群图像,只需将图像命名为m[1-5].png
或将 imagePath 选项设置为图像的位置和名称,如下所示:imagePath: 'customImages/cat'
图像@ 987654326@转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 替换为每个图像的相对路径,并更新尺寸以避免图像拉伸。
【讨论】:
当我使用您的默认图片代码时,即使您提供的链接(例如github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/…)链接到有效图片,我也会在 Google 地图上显示损坏的图片,这是怎么回事? 不知道。提出问题,包括minimal reproducible example 并提供调试详细信息。以上是关于Google Maps API imagePath 本地图像不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Google Maps API DirectionsService.route 与 Google Maps Directions 不同
在 maps.google.com 上的缩放比在 Google Maps API v3 上更流畅
Google Maps API V3 中的 API 密钥是啥?
Apple Maps 和 Google Maps API 的参数相同吗?