У меня есть проект vue, созданный vue-cli v3, и я пытаюсь предоставить пользовательские маркеры для markerclustererplus v3, но он не будет работать!
Я поместил папку «m», содержащую все изображения m {1-5} .png, и предоставил опцию imagePath для MarkerClusterer imagePath: "/assets/m/m"
, но все, что я получил, это значок, отображающий неудачную загрузку изображения. Иконки имеют правильный путь, http://localhost:8080/assets/m/m2.png
Пока что я пытался переместить папку "m" в папку public
и components
, но она тоже не работает. Также не помогает, если я открываю папку http://localhost:8080/assets/m
или файлы в ней из адресной строки браузера. Я также не вижу изображений на вкладке источника браузера.
UPDATE:
Согласно markerclustererplus документация imagePath
свойство представляет собой строку, которая:
Полный URL-адрес корневого имени группы файлов изображений, используемых для значков кластера. Полное имя файла имеет вид imagePathn.imageExtension, где n - номер файла изображения (1, 2 и т. Д.). Значением по умолчанию является MarkerClusterer.IMAGE_PATH.
Поэтому я не могу просто использовать require ('/ folder_path /'), потому что я не вызываю точный .png, необходимый для определенного типа кластера, и не могу передать массив изображений в свойство imagePath
, потому что это строка.
Вот мое дерево каталогов src
:
.
├── App.vue
├── api.js
├── assets
│ ├── logo.png
│ └── m
│ ├── m1.png
│ ├── m2.png
│ ├── m3.png
│ ├── m4.png
│ └── m5.png
├── components
│ ├── google-map.vue
│ └── side-bar.vue
├── dummyData.js
└── main.js
Я передаю опцию imagePath: "/assets/m/m"
в MarkerClusterer в файле google-map.vue
, в браузере появляется элемент <img src="/assets/m/m2.png">
.