Блог

Главная - Вопросы по программированию - Есть ли какой-нибудь способ поместить изображение внутри маркера на картах Google?

Есть ли какой-нибудь способ поместить изображение внутри маркера на картах Google?

#javascript #reactjs #react-google-maps

#javascript #reactjs #реагировать-google-maps

Вопрос:

Я использую react-google-maps и хочу использовать изображение пользователя внутри маркера. Как я могу поместить динамическое изображение внутри маркера?

Я попытался использовать объект icon маркера, но это не сработало, потому что он просто поместил изображение на карту не внутри маркера.

Что-то вроде этого что-то вроде этого

Комментарии:

1. Вы уже что-нибудь пробовали?

2. tomchentw.github.io/react-google-maps/#marker — icon ?

3. Я уже пробовал icon. Объект Icon просто помещает само изображение на карту, а не внутри маркера

4. Я разработал это с помощью markerwithlabel, но marker with label, похоже, не поддерживает InfoWindow.

Ответ №1:

Вы можете передать параметры реквизита в компоненте Marker и поместить URL-адрес вашего изображения src в свойство icon. (Не проверено, но я думаю, что это сработает для вас)

Пример

 <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
>
    <Marker           
        options={{ icon: { url: ...., scaledSize: ...., size: .... } }}
        position={{ lat: -34.397, lng: 150.644 }}
    />
</GoogleMap>

scaledSize : размер всего изображения после масштабирования, если таковой имеется. Используйте это свойство для растягивания / сжатия изображения или спрайта.

размер: размер отображения спрайта или изображения. При использовании спрайтов необходимо указать размер спрайта. Если размер не указан, он будет установлен при загрузке изображения.

Метки: