2016-04-01 14 views
2

Orijinal olarak eklediklerim küçük olan bir haritaya işaretçiler ekliyorum.Google Haritalar'ı kullanırken işaretleyici boyutunu değiştirme setIcon

HTML

<div class="row"> 
    <div class="small-6 columns"> 
    <select id="state-select" class=""> 
      <option value="">SELECT A STATE</option> 
      <option value="OH">Ohio</option> 
      <option value="IL">Illinois</option> 
      <option value="IN">Indiana</option> 
      <option value="MO">Missouri</option> 
      <option value="MI">Michigan</option> 
    </select> 
    </div> 
</div> 
<div id="map-canvas"></div> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" type="text/javascript"></script> 

JS:

$.each(stateMarkerArr, function(index, thisStateMarker) { 
    if (thisStateMarker.state == stateCode) { 
     thisStateMarker.setIcon('/img/example_img.png');   
     bounds.extend(thisStateMarker.getPosition());   
    } else { 
     thisStateMarker.setIcon('/img/example_img2.png');  
    } 
}); 

Ancak, ben o zaman bunların üzerine döngü ve aynı boyutta ama farklı renge sahip başka bir işaretleyici için bazılarını değiştirmek Ancak, daha büyük boyutlu olarak işaretlenir:

enter image description here

setIcon işlevini kullanırken işaretleyicinin boyutunu dinamik olarak nasıl ayarlayabilirim, böylece bu iki işaretleyiciyi aynı boyutta yapabilirim?

Ben orijinal noktalarını ayarlama edildi:

var icon = { 
    url: '/img/example_img.png', 
    scaledSize: new google.maps.Size(28,50) 
} 
var marker = new google.maps.Marker({ 
    position: currLatlng, 
    map: map, 
    title: thisLocation.Store, 
    state: currentState, 
    icon: icon 
}); 

VE daha sonra anında noktaları kurmaya çalışıyor:

$.each(stateMarkerArr, function(index, thisStateMarker) { 
    if (thisStateMarker.state == stateCode) { 
     var icon = { 
      url: '/img/example_img.png', 
      scaledSize: new google.maps.Size(28,50) 
     }  
     thisStateMarker.setIcon(icon); 
     bounds.extend(thisStateMarker.getPosition());   
    } else { 
     var icon = { 
      url: '/img/example_img2.png', 
      scaledSize: new google.maps.Size(28,50) 
     }  
     thisStateMarker.setIcon(icon);    
    } 
}); 
+0

bir [Minimal, test edilmiş, Tam ve Okunabilir örnek] veriniz (http://stackoverflow.com/help/mcve) sorunu sergiler söyledi. – geocodezip

+0

[Kodunuz benim için çalışıyor] (http://jsfiddle.net/geocodezip/3tLrkwht/) her iki simge de aynı boyuttadır. – geocodezip

cevap

2

google.maps.Icon nesnesinin size veya scaledSize özelliklerini kullanabilirsiniz. the Docs ve this example Bkz:

var icon = {url:'/img/example_img.png', size: new google.maps.Size(20, 32)}; 
thisStateMarker.setIcon(icon); 
+0

Bu, doğru kod örneğidir, hiç kimse gerçekten eklemekten rahatsız olur. Teşekkürler bayım! – jlstr

0

Bu ücretli bir özelliktir. Google'a başvurmanız ve ne kadar tutacağını sormanız gerekir;)

+2

bundan emin misin? ScaledSize seçeneğini kullanamaz mı? –

+0

@IntercoolerTurbo kesinlikle! :) –