Google Maps API imagePath Локальное изображение не работает - PullRequest
Новая
       10

Google Maps API imagePath Локальное изображение не работает

0 голосов
/ 24 января 2019

Я использовал 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 структуру папок .

Я также пробовал разными способами, как ..

imagePath: "../img/m", Но он тоже не работает.

Может кто-нибудь подсказать, что я здесь делаю не так?Почему мой imagePath не берется?

1 Ответ

0 голосов
/ 24 января 2019

Чтение документации , оно гласит: Чтобы использовать ваши собственные изображения кластера, просто назовите ваши изображения 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-адреса относительным путем к каждому изображению и обновите размеры, чтобы избежать растяжения изображения.

...