多边形上的Google Map API信息信息框

时间:2014-07-23 14:29:50

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

我使用搜索,但答案无法找到...

我有谷歌地图API,其中我公共多边形和标记。当点击标记时,他打开信息窗口,在这个窗口中我有相同的文字和按钮。当我需要选择这个文本时,我不能因为当点击并移动鼠标时,点击悬停就是移动地图......

我无法启用事件传播:是的,因为我在窗口中有按钮 我尝试z-index,但bug没有修复 ... 请帮我,现场演示:http://goo.gl/b120B6

var mapOptions = {
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(41.7324592,44.8070955),
    disableDefaultUI: true, 
};


function addMarker(id,icon,pos) {
var marker = new google.maps.Marker({
    position: pos,
    animation: google.maps.Animation.DROP,
    icon: icon
});
google.maps.event.addListener(marker,'click',function(){
    map.panToWithOffset(this.getPosition(),100,-100);
    $.ajax({
        url: 'ajax/getObjectInfo',
        type: 'POST',
        data: {id: id},
        success: function(data){
            markerData = $.parseJSON(data);
            var images = '';
            var imagespath = '/uploaded/object/photo/' + id + '/small/';
            if (markerData.files !== undefined) {
                for (var k = 0; k < markerData.files.small.length; k++) {
                    images += '<img src="' + imagespath + markerData.files.small[k] + '">';
                    if (k == 1) break;
                }
            } 

            var w_content = '<div class="info-window" id="ib">\
            <div class="title-s">'+markerData.price+' '+markerData.valuta_pref+'</div>\
            <div class="feature-area">\
                <ul class="info-feature-list">\
                    <li><span class="listtitle"><i class="icon-caret-right"></i>Area:</span> '+markerData.area+'</li>\
                </ul>\
                <button class="button moreinfo" data-id="' + id + '" style="margin-top:10px;"><i class="butoni icon-info-sign"></i> More Details</button>\
            </div>\
            <img alt="" src="assets/map_files/images/clip.png" class="clip-image">';

            var images = '';
            var imagespath = '/uploaded/object/photo/' + id + '/small/';
            if (markerData.files !== undefined) {
                for (var k = 1; k <= markerData.files.small.length; k++) {
                    images += '<div class="photo-frame'+k+'-s">\
                                    <div class="labelplace1">\
                                        <span class="label label-'+class_text_deal_type+'">Here Type</span>\
                                    </div>\
                                    <img class="photo-s" src="'+ imagespath + markerData.files.small[k-1] +'">\
                                </div>';
                    if (k == 2) break;
                }
            }
            w_content += images + '</div>';

            if (infowindow) {
                infowindow.close();
            };
            infowindow = new InfoBox({
                content: w_content,
                disableAutoPan: true,
                maxWidth: 400,
                pixelOffset: new google.maps.Size(-230, -296),
                closeBoxMargin: "-8px 0px 2px 2px",
                closeBoxURL: "assets/map_files/images/close.png",
                boxStyle: { 
                    opacity: 1,
                    width: "400px"
                },
                infoBoxClearance: new google.maps.Size(400, 400),
                isHidden: false,
                MapPanes: "floatPane",
                enableEventPropagation: true,
                position: pos
            });
            infowindow.open(map,marker);
        }
    });
});
return marker;
}

0 个答案:

没有答案