2016-04-01 6 views
2

Я добавляю маркеры на карту, которые небольшие, когда я их первоначально добавляю. Тем не менее, я затем цикл над ними и изменить некоторые из них на другой маркер, который имеет тот же размер, но другой цвет:Как изменить размер маркера при использовании Google Maps 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');  
    } 
}); 

Однако маркер рисуется как в большем размере:

enter image description here

Как я могу динамически установить размер маркера при использовании функции setIcon, чтобы я мог сделать эти два маркера одинакового размера?

Я устанавливал исходные точки с:

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 
}); 

И затем пытается установить точки на лету с:

$.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

Просьба [Minimal, Complete, испытана и читаемый примера] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. – geocodezip

+0

[Ваш код работает для меня] (http://jsfiddle.net/geocodezip/3tLrkwht/) оба значка имеют одинаковый размер. – geocodezip

ответ

2

Вы можете использовать объекты size или scaledSize объекта google.maps.Icon. См the Docs и this example:

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

Это правильный пример кода, который никто не захотел добавить. Спасибо, сэр! – jlstr

0

Это платная функция. Вам необходимо связаться с Google и спросить их, сколько это будет стоить;)

+2

вы в этом уверены? Не может ли он использовать параметр scaledSize? –

+0

@IntercoolerTurbo абсолютно! :) –

Смежные вопросы