是否可以通过缩放更改Rich标记大小?

时间:2016-05-13 08:56:20

标签: javascript google-maps google-maps-api-3

我正在使用谷歌地图的Rich标记库,现在我想在缩放时调整标记大小我有类似这样的东西,但我测试了它改变了bg颜色,但似乎不起作用:

locations[i][0].Smallsize  = $('.rich-marker').css({ 'width' : '5px', 'height' : '5px' });
locations[i][0].Normalsize  = $('.rich-marker').css('background-color',  'red' );

        if (map.getZoom() === 16) {
            marker.scaledSize = locations[i][0].Smallsize;
            console.log(marker.scaledSize);
        }

        if (map.getZoom() === 17) {
            marker.scaledSize = locations[i][0].Normalsize;
            console.log(marker.scaledSize);
        }

这是我的第二个选项,也不起作用:

locations[i][0].Normalsize  = new google.maps.Size(20, 20);

这是位置数组:

var locations = [
    [{id: 1,  lat: 51.523903408094064, lng:  5.137792649612493,   content: 'Kids Jungalow Giraffe'}],
    [{id: 2,  lat: 51.52377991387855,  lng:  5.137905302391118,   content: 'Kids Jungalow Giraffe'}],
    [{id: 3,  lat: 51.523643068545915, lng:  5.138098421440191,   content: 'Kids Jungalow Giraffe'}],
    [{id: 4,  lat: 51.52347284572886,  lng:  5.1382003453827565,  content: 'Kids Jungalow Giraffe'}],
    [{id: 5,  lat: 51.52331931087756,  lng:  5.1383505490875905,  content: 'Kids Jungalow Giraffe'}],

在这里我将标记设置为for循环:

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 class="rich-marker">'+'<span class="number-id">' + number + '</span>' + '</div>';

        var marker = new RichMarker({
            position: myLatLng,
            scaledSize: new google.maps.Size(15, 15),
            draggable: true,
            map: map,
            flat: true,
            anchor: RichMarkerPosition.MIDDLE,
            content: marker_html
        });

1 个答案:

答案 0 :(得分:0)

得到解决方案我很抱歉快速打开一个问题!:

if (map.getZoom() === 16) {
            $('.rich-marker').css({ 'width' : '5px', 'height' : '5px' });
            $('.number-id').css({ 'font-size' : '5px'});
        }

    if (map.getZoom() === 17) {
        $('.rich-marker').css({ 'width' : '16px', 'height' : '16px' });
        $('.number-id').css({ 'font-size' : '8px'});
    }

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