javascript - 如何为信息框设置动态像素偏移？

我有一张地图，基本上有2种类型的多个标记。一个是较大的宽标记，另一个是较小的方形标记。两种类型都需要具有一个在单击时显示的信息框。由于标记的形状和大小不同，我非常希望将信息框窗口根据单击的标记锚定在不同的位置。当然，我找到了infobox选项的pixelOffset属性，但是我似乎无法根据循环经过的标记来动态设置此属性。基本上，我遍历了一组标记数据，构建了标记（通过“ new google.maps.marker（）”东西），然后继续添加事件侦听器以单击标记，从而调用该函数以打开信息框。

所以我的问题是，查看下面的代码后，如何动态设置信息框的pixelOffset？
我在下面尝试的操作显然无法解决问题！当我加载页面时，我转储到那里的警报确实显示了正确的设置！

<script type="text/javascript">
var LocationData = [
    [29.966270,-95.682491, "bhi", "Company Houston", "", "", "", "", "", "", "1"],
    [34.936190, -88.655899, "motors", "ConocoPhilips", "testfield #1", "rig #1", "HT102313MTR", "Eagle Ford", "v", "m", "0"],
    [32.133333, -102.3167, "type1", "Halliburton", "Test Field #2", "H&P #48", "HT070313RSS", "Bakken", "h", "m", "1"],
    [47.4667, -100.9333, "type2", "BP", "Test Field #3", "Ensco #318", "CC111512GWD", "Marcellus", "s", "", "2"],
    [41.5700, -117.7839, "type3", "Drake Directional", "Test Field #4", "H&P #143", "PE010214MWD", "Utica", "j", "f", "3"],
    [40.4667, -76.9333, "type4", "Shell", "testfield #5", "Ensco #23", "HT121213GYRO", "Barnett", "h", "m", "4"],

];

jQuery(document).ready(function(){
    initMap();
});

var side_bar_html = '';
var gmarkers = [];
var htmls = [];

var myLatLong = new google.maps.LatLng(29.966270, -95.682491);
var mapOptions = {
    panControl: true,
    zoomControl: true,
    scaleControl: true
};

boxText = document.createElement("div");

function iconSizeFunction(usedIcon) {
    switch(usedIcon)
    {
    case 'bhi':
        var iconSizew_or = '68';
        var iconSizeh_or = '72';
        var iconSizew = '34';
        var iconSizeh = '36';
        var iconOriginw = '17';
        var iconOriginh = '28';
        var infoboxOffsetw = '200';
        var infoboxOffseth = '10';
        return [iconSizew_or, iconSizeh_or, iconSizew, iconSizeh, iconOriginw, iconOriginh, infoboxOffsetw, infoboxOffseth];
        break;
    default:
        var iconSizew_or = '264';
        var iconSizeh_or = '70';
        var iconSizew = '132';
        var iconSizeh = '35';
        var iconOriginw = '17';
        var iconOriginh = '-5';
        var infoboxOffsetw = '150';
        var infoboxOffseth = '200';
        return [iconSizew_or, iconSizeh_or, iconSizew, iconSizeh, iconOriginw, iconOriginh, infoboxOffsetw, infoboxOffseth];
        break;
    }
}

function initMap()
{
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();
    var iconUsed;

    for (var i in LocationData)
    {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        var iconUsed = p[2];
        var iconSizes = iconSizeFunction(p[2]);
        var infoBoxPosition = new google.maps.Size(iconSizes[6], iconSizes[7]);

        var jobStatus = p[10];

        switch(jobStatus)
        {
        case '0':
            jobStatus = 'off';
            break;
        case '1':
            jobStatus = 'on';
            break;
        case '2':
            jobStatus = 'up';
            break;
        case '3':
            jobStatus = 'unknown';
            break;
        case '4':
            jobStatus = 'new';
            break;
        }

        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: {
                url: '/images/mapicons/' + iconUsed + '_' + jobStatus + '.png',
                size: new google.maps.Size(iconSizes[0], iconSizes[1]),
                origin: new google.maps.Point(0,0),
                anchor: new google.maps.Point(iconSizes[4], iconSizes[5]),
                scaledSize: new google.maps.Size(iconSizes[2], iconSizes[3])
            },
            shape: {
                coord: [0, 0, iconSizes[2], iconSizes[3]],
                type: 'rect'
            },
            optimized: false,
            animation: google.maps.Animation.DROP,
            content: '<div class="boxOptionsHeader"><h2>' + p[3] + '</h2></div><div class="boxOptionsExtra">' + p[4] + '<br /><a href="http://maps.apple.com/maps?saddr=Current+Location&daddr=' + p[0] + ',' + p[1] + '">Directions to here</a></div>'
        });

        var i = gmarkers.length;
        gmarkers.push(marker);
        markerLength = gmarkers.length-1;
        side_bar_html += '- <a href="javascript:sidebarclick(' + markerLength + ')">' + p[3] + '<\/a><br \/>';


        alert(infoBoxPosition);
        var boxOptions = {
            content: boxText,
            disableAutoPan: false,
            alignBottom: true,
            maxWidth: 0,
            pixelOffset: infoBoxPosition,
            zIndex: null,
            boxStyle: {
                width: "240px"
            },
            closeBoxMargin: "0px 0px 0px -40px",
            closeBoxURL: "/images/mapicons/close_info.png",
            infoBoxClearance: new google.maps.Size(1, 1),
            visible: true,
            pane: "floatPane",
            enableEventPropagation: false,
            boxClass: 'boxOptions'
        };

        //console.log(marker.content);
        var ib = new InfoBox(boxOptions);
        google.maps.event.addListener(marker, 'click', function(e) {
            boxText.innerHTML = this.content;
            ib.open(map, this);
        });

        google.maps.event.addListener(map, 'click', function() {
            ib.close();
        });

        function setZoomWhenMarkerClicked() {
            var currentZoom = map.getZoom();
            if (currentZoom < 7) {
                map.setZoom(7);
            }
            return false;
        }
    }

    document.getElementById("side_bar").innerHTML = side_bar_html;
    map.fitBounds(bounds);
}

function sidebarclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

</script>

这是盒子的CSS。

html { height: 100% }
body { height: 100%; margin: 0; padding: 0; background-color: #FFF; }
#map-canvas { height: 100%;}

.infobox-wrapper {
    display:none;
}

.boxOptions {
    position: relative;
    border: 2px solid #E1002B;
    margin-top: 0px;
    background: #FAFAFA;
    color:#5B6770;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 2px;
    text-shadow:0 -1px #FFF;
    z-index: 20;
}

.boxOptionsHeader {
    margin-top: -10px;
    padding: 0 1em;
}

.boxOptionsExtra {
    margin-top: -12px;
    padding: .5em 1em;
}

.boxOptions:after, .boxOptions:before {
    top: 100%;
    left: 15px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.boxOptions:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #FAFAFA;
    border-width: 8px;
    margin-left: -8px;
}

.boxOptions:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #E1002B;
    border-width: 11px;
    margin-left: -11px;
}

最佳答案

在循环内创建信息框是多余的，所有标记都将使用相同的信息框（将创建最后一个信息框。请注意，您每次迭代都会覆盖ib变量）。使用default-options在循环外部创建一个InfoBox -instance。

如何应用动态pixelOffset：

将其存储为标记的属性，例如：

ibOffset :new google.maps.Size(iconSizes[6], iconSizes[7])

在click -listener中，设置pixelOffset的ib-选项：

ib.setOptions({'pixelOffset':this.ibOffset});

但最重要的是：

google.maps.Size()期望参数为Number类型，但您提供Strings。

删除infoboxOffsetw和infoboxOffseth值周围的引号

关于javascript - 如何为信息框设置动态像素偏移？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21262380/