Google Haritalar işaretçi simge resmini yeniden boyutlandır

Bir işaretleyicinin icon özelliğine bir görüntü yüklediğimde, orijinal boyutuyla birlikte olması gerektiği gibi çok daha büyük olarak görüntülenir.

Standardı daha küçük bir boyuta getirmek istiyorum. Bunu yapmanın en iyi yolu nedir?

Kod:

function addMyPos(latitude,longitude){
  position = new google.maps.LatLng(latitude,longitude)
  marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "../res/sit_marron.png"
  });
}

Orijinal boyut 100 x 100 ise ve bunu 50 x 50 olarak ölçeklendirmek istiyorsanız Boyut yerine scaledSize kullanın.

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});

Yorumlarda belirtildiği gibi, bu belge ile Icon nesnesi lehine güncellenmiş bir çözümdür.

Icon nesnesini kullan

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

 posicion = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: posicion,
  map: map,
  icon: icon
 });

Icon için MarkerImage kullanımdan kaldırıldı

Google Haritalar JavaScript API'sinin 3.10 sürümüne kadar karmaşık simgeler MarkerImage nesneleri olarak tanımlandı. Icon nesnesi hazır bilgisi 3.10'da eklenmiştir ve 3.11 sürümünden itibaren MarkerImage'ın yerini almıştır. Simge nesnesi değişmezleri, MarkerImage ile aynı parametreleri destekler, yapıcıyı kaldırarak, {} 'lerde önceki parametreleri sararak ve her parametrenin adlarını ekleyerek bir MarkerImage'ı kolayca bir Icon'a dönüştürmenizi sağlar.

Phillipe'nin kodu şimdi:

 var icon = {
     url: "../res/sit_marron.png", // url
     scaledSize: new google.maps.Size(width, height), // size
     origin: new google.maps.Point(0,0), // origin
     anchor: new google.maps.Point(anchor_left, anchor_top) // anchor 
 };

 position = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: position,
  map: map,
  icon: icon
 });

Kökeni sil ve çapa daha düzenli resim olacak

  var icon = {
        url: "image path", // url
        scaledSize: new google.maps.Size(50, 50), // size
    };

 marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, long),
  map: map,
  icon: icon
 });

Konuya kendim gibi tam bir acemi, bu cevaplardan birini uygulamak sizin kontrolünüzde ise, çevrimiçi bir editör veya Photoshop gibi bir fotoğraf editörü ile yeniden boyutlandırmaktan daha zor olabilir .

Haritada 500x500 boyutundaki bir resim, 50x50 boyutundaki bir resimden daha büyük görünecektir.

Programlama gerekmez.

Aynı sorunu yaşadım ama biraz farklıydı. Philippe Boissonneault'un öne sürdüğü gibi simgeye zaten bir nesne olarak sahiptim , ancak bir SVG görüntüsü kullanıyordum.

Benim için çözen şey şuydu:
Bir SVG görüntüsünden bir PNG'ye geçin ve kullanacağınız şeyin iki katı büyüklüğünde bir görüntüye sahip Catherine Nyo'yu takip edin.

Benim gibi vue2-google-maps kullanıyorsanız, boyutu ayarlamak için kod şöyle görünür:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>