es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿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>
Tags:  , ,

Answer

  1. Avatar for 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 especificar scaledSize es:

    <marker icon="{url: resource.marker_circle, scaledSize: {width: 32, height: 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>
    

    Al pasar scaledSize como un objeto con las propiedades width y height, el ícono se redimensionará adecuadamente.

Comments are closed.