每个选择器的Jquery css颜色都在变化，但字体大小不是？

时间：2016-05-17 12:13:15

标签： javascript jquery google-maps

我正在使用谷歌地图，我有一系列标记，如下所示：

var locations = [
        [{
            id: 1,
            lat: 51.5239935252832,
            lng: 5.137663903579778,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 2,
            lat: 51.523853342911906,
            lng: 5.1377765563584035,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 3,
            lat: 51.5237298485607,
            lng: 5.137969675407476,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 4,
            lat: 51.52355628836575,
            lng: 5.138066234932012,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 5,
            lat: 51.52340275379578,
            lng: 5.138211074218816,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 6,
            lat: 51.523199152806626,
            lng: 5.138382735595769,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 7,
            lat: 51.5229955509073,
            lng: 5.138511481628484,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 8,
            lat: 51.52280529912936,
            lng: 5.138543668136663,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 9,
            lat: 51.523596340777075,
            lng: 5.138463201866216,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 700,
            lat: 51.523372714362736,
            lng: 5.1386992362595265,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 101,
            lat: 51.52329594683302,
            lng: 5.138838711128301,
            content: 'Kids Jungalow Giraffe'
        }]

比我循环通过标记数组并将html标记设置为每个位置，如下所示：

for (i = 0; i < locations.length; i++) {
    var myLatLng = new google.maps.LatLng({
        lat: locations[i][0].lat,
        lng: locations[i][0].lng
    });
    var number = locations[i][0].id;
    var marker_html = '<div id="' + number + '"><div class="rich-marker"><span class="number-id">' + number + '</span></div></div>';

    var marker = new RichMarker({
        position: myLatLng,
        map: map,
        flat: true,
        anchor: RichMarkerPosition.MIDDLE,
        content: marker_html
    });
}

我想在缩放级别18上更改类number-id的css样式，如下所示：

map.addListener('zoom_changed', function () {
        // Limit the zoom level
        if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);

        // for loop door locaties
        for (i = 0; i < locations.length; i++) {
            setMarkerSize(i);
        }
    });

    function setMarkerSize(i) {
        var infobox = locations[i][0].infobox;
        var id = locations[i][0].id;

      if (map.getZoom() === 18) {
            $('.rich-marker').css({ 'display' : 'block', 'width' : '20px', 'height' : '20px' });
            $('.number-id').css({ 'display' : 'block', 'font-size' : '12px'});

            if (id >= 100) {
                console.log(id);
                console.log($('[data-id="' + id + '"]'));

                $('#' + id).find('.number-id').css('font-size', '10px');
                $('#' + id).find('.number-id').css('color', 'red');
            }

            infobox.setOptions({ pixelOffset: new google.maps.Size(-93, -22) });
        }

    }

颜色在100以上都在变化，但是字体大小只会改变数组中的最后一个对象为什么会这样？

1 个答案:

答案 0 :(得分：2)

每次在循环中处理标记时，您都要将所有 font-size属性设置为12px：

$('.number-id').css({
    'display': 'block',
    'font-size': '12px'
  });

然后将当前标记的font-size设置为＆＃34; 10px＆＃34;。只留下你设置的最后一个＆＃34; 10px＆＃34;。

proof of concept fiddle

代码段

＆＃13;
＆＃13; 
var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations.length; i++) {
    var myLatLng = new google.maps.LatLng({
      lat: locations[i][0].lat,
      lng: locations[i][0].lng
    });
    bounds.extend(myLatLng);
    var number = locations[i][0].id;
    var marker_html = '<div id="' + number + '"><div class="rich-marker"><span class="number-id">' + number + '</span></div></div>';

    var marker = new RichMarker({
      position: myLatLng,
      map: map,
      flat: true,
      anchor: RichMarkerPosition.MIDDLE,
      content: marker_html
    });
  }
  map.setCenter(bounds.getCenter());
  var minZoomLevel = 18;
  map.addListener('zoom_changed', function() {
    document.getElementById('zoom').innerHTML = map.getZoom();

    // Limit the zoom level
    if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);

    // for loop door locaties
    for (i = 0; i < locations.length; i++) {

      setMarkerSize(i);
    }
  });

  function setMarkerSize(i) {
    var infobox = locations[i][0].infobox;
    var id = locations[i][0].id;

    if (map.getZoom() === 18) {
      $('.rich-marker').css({
        'display': 'block',
        'width': '20px',
        'height': '20px'
      });
      /* $('.number-id').css({
        'display': 'block',
        'font-size': '12px'
      }); */

      if (id >= 100) {
        console.log(id);
        console.log($('[data-id="' + id + '"]'));

        $('#' + id).find('.number-id').css('font-size', '18px');
        $('#' + id).find('.number-id').css('color', 'red');
      }

      /* infobox.setOptions({
        pixelOffset: new google.maps.Size(-93, -22)
      }); */
    }

  }
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
  [{
    id: 1,
    lat: 51.5239935252832,
    lng: 5.137663903579778,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 2,
    lat: 51.523853342911906,
    lng: 5.1377765563584035,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 3,
    lat: 51.5237298485607,
    lng: 5.137969675407476,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 4,
    lat: 51.52355628836575,
    lng: 5.138066234932012,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 5,
    lat: 51.52340275379578,
    lng: 5.138211074218816,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 6,
    lat: 51.523199152806626,
    lng: 5.138382735595769,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 7,
    lat: 51.5229955509073,
    lng: 5.138511481628484,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 8,
    lat: 51.52280529912936,
    lng: 5.138543668136663,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 9,
    lat: 51.523596340777075,
    lng: 5.138463201866216,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 700,
    lat: 51.523372714362736,
    lng: 5.1386992362595265,
    content: 'Kids Jungalow (5p)'
  }],
  [{
    id: 101,
    lat: 51.52329594683302,
    lng: 5.138838711128301,
    content: 'Kids Jungalow Giraffe'
  }]
];
＆＃13; 
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script>
<div id="zoom"></div>
<div id="map_canvas"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题