¿Cómo se redimensiona el marcador de mapa en NG-Map (AngularJS)?
Estoy tratando de cambiar el tamaño de mi icono de mapa con scaledSize, pero el icono no cambia, aquí está mi código:
Esto funciona:
<marker icon="{resource.marker_circle}" class="marker-icon" id="{resource.id}" position="{resource.address}" title="{resource.name}" id="resource_clicked" value="{resource.id}" on-mouseover="showInfoWindow(event, '{resource.id}')"></marker>
Pero cuando intento cambiar el tamaño de los iconos, no funciona con scaledSize:
<div class="map-container">
<div style="margin: 0 auto; overflow:hidden; background: white;">
<div style=" width: 100%; margin:center; height: 257px; border: none; border-radius: 25px;" map-lazy-load="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
<ng-map ng-map-custom="" style="width: 100%;height: 100%;border: none; border-radius: 25px;" center="Santa Ana, CA" zoom="11">
{!resources.filter('category_ref', _equals(my.category)).each(per_page: 30, page:response._page_44_resources_repeatingsection1) do |resource|}
<marker icon="{url: resource.marker_circle, scaledSize:[32,40], origin: [0,0], anchor: [16,40]}" class="marker-icon" id="{resource.id}" position="{resource.address}" id="resource_clicked" value="{resource.id}" on-mouseover="showInfoWindow(event, '{resource.id}')"></marker>
<info-window id="{resource.id}" max-width="300" style="display: none;">
<div ng-non-bindable="">
<div id="siteNotice"></div>
<a href="" response-click="go">
<h3 id="firstHeading" class="firstHeading">Location - # of Searches</h3>
</a>
<div id="bodyContent">
<p>
{resource.city}
</p>
</div>
</div>
</info-window>
{!end}
</ng-map>
</div>
</div>
</div>
davy.ai
El problema con el código es que la propiedad
scaledSize
debe pasarse como un objeto y no como un arreglo. La forma correcta de especificarscaledSize
es:Al pasar
scaledSize
como un objeto con las propiedadeswidth
yheight
, el ícono se redimensionará adecuadamente.