Блог

Главная - Вопросы по программированию - Пользовательское изображение маркера Google Maps JS

Пользовательское изображение маркера Google Maps JS

#javascript #google-maps-markers

Вопрос:

Поэтому в настоящее время я использую хак-а-раунд для поворота пользовательского маркера изображения в картах Google.

Проблема, с которой я сталкиваюсь, заключается в определении размеров. В основном, если мое изображение png имеет ширину 400 пикселей и высоту 200 пикселей.

Когда вы поворачиваете это изображение так, чтобы ширина была вертикальной, оно отсекает изображение.

Как я предполагаю вписать изображение в рамки. Псевдокод, о котором я сначала думал, был чем-то вроде этого, но не смог заставить его работать.

 const image = currentImage;
if(image.width > image.height){
   //make bounding box of marker image.width squared 
} else{
   //make bounding box of marker image.height squared
}

Просто для справки, это моя функция поворота:

 function rotate() {
const images = $("#map").find("img").get();
  for (let i = 0; i < images.length; i  ) {
      if ($(images[i]).attr("src").replaceAll(window.location.origin, "") === currentMarker.itemSrc) {
         $(images[i]).css({
             'transform': 'rotate('   currentDeg   'deg)',
         });
         break;
    }
  }
}

Вот как я добавляю маркер: (не обращайте внимания на мои пользовательские поля, которые я добавил в объект маркера)

     const markerIcon = {
        url: currentImage.src   "#"   allMarkers.length,
        // size: new google.maps.Size(?, ?),
        // origin: new google.maps.Point(?, ?),
        // anchor: new google.maps.Point(?, ?)
    };

    const marker = new google.maps.Marker({
        position: mapsMouseEvent.latLng,
        map: map,
        draggable: true,
        icon: markerIcon,
        itemSrc: currentImage.src.replaceAll(window.location.origin, "")   "#"   allMarkers.length,
        id: lat   ","   lng,
        optimized: false
    });

Автомобиль поворачивается вертикально

Происхождение автомобиля по умолчанию

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

1. Лучше всего просто повернуть и сохранить изображение маркера в формате png/jpg, прежде чем вставлять его в Google Maps JavaScript. Таким образом, вам не придется поворачивать его в своей реализации кода.

2. Да, это было бы лучше всего, но пользователю нужна возможность поворачивать маркер без необходимости удалять его и добавлять обратно с помощью этого нового поворота

Ответ №1:

Наконец-то я нашел решение. Этот код увеличит ваш контейнер DIV маркера и центрирует изображение.

Не беспокойтесь о пользовательском поле rotation . Это поле не существует для пользовательского маркера изображения. Я создал его, чтобы отслеживать и обновлять поворот изображения.

 const currentImage = whateverYourImageIs;

    let markerSize;
    let origin;
    if(currentImage.naturalWidth > currentImage.naturalHeight){
        markerSize = currentImage.naturalWidth;
        origin = new google.maps.Point(0 , -(markerSize - currentImage.naturalHeight) / 2);
    }else{
        markerSize = currentImage.naturalHeight;
        origin = new google.maps.Point(-(markerSize - currentImage.naturalWidth) / 2 , 0);
    }




function createMarker(position, iconImage, label, rotation, markerSize, origin) {

const markerIcon = {
    url: iconImage,
    labelOrigin: new google.maps.Point(20, 20),
    size: new google.maps.Size(markerSize, markerSize),
    origin: origin,
    anchor: new google.maps.Point(0,0)
};

return new google.maps.Marker({
    position: position,
    map: map,
    draggable: true,
    icon: markerIcon,
    optimized: false,
    label: label,
    rotation: rotation
});
}
Метки: