Question

您好我正在实施自定义地理标记系统，确定

我存储每个地方的cordenades的数组

/* ******Opciones del etiquetado del mapa*** */
    var TagSpeed = 800; //el tiempo de la animacion
    var animate = true;     //false = fadeIn / true = animate
    var paises = {
        "isora":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia Palacio de Isora'
        },
        "pepe":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia  de Don Pepe'
        },
        "australia":  {
             leftX: '565',
             topY: '220',
             name: 'Gran Melia Uluru'
        },
        "otro":  {            //    ejemplo
             leftX: '565',    //    cordenada x 
             topY: '220',     //    cordenada y
             name: 'soy otro' //    nombre a mostrar
        }  /*                 <==>  <span class="otro mPointer">isora</span> */
    }
/**/

这是我用js检查的方式

function escucharMapa(){
    /*fOpciones*/
    $('.mPointer').bind('mouseover',function(){
        var clase = $(this).attr('class').replace(" mPointer", "");
        var left_ = paises[clase].leftX;
        var top_ = paises[clase].topY;
        var name_ = paises[clase].name;
        $('.arrow .text').html(name_);
        /*Esta linea centra la etiqueta del hotel con la flecha. Si cambia el tamaño de fuente o la typo, habrá que cambiar el  3.3*/
        $('.arrow .text').css({'marginLeft':'-'+$('.arrow .text').html().length*3.3+'px'});
        $('.arrow').css({top:'-60px',left:left_+'px'});
        if(animate) $('.arrow').show().stop().animate({'top':top_},TagSpeed,'easeInOutBack');
        else $('.arrow').css({'top':top_+'px'}).fadeIn(500);
    });
    $('.mPointer').bind('mouseleave',function(){
        if(animate) $('.arrow').stop().animate({'top':'0px'},100,function(){ $('.arrow').hide() });
        else $('.arrow').hide();
    });
}
/*Inicio gestion geoEtiquetado*/
$(document).ready(function(){

    escucharMapa();
});

HTML

<div style="float:left;height:500px;">
                    <div class="map">
                        <div class="arrow">
                            <div class="text"></div>
                            <img src="img/flecha.png"/>
                        </div>
                        <!--mapa-->
                        <img src="http://www.freepik.es/foto-gratis/mapa-del-mundo_17-903095345.jpg" id="img1"/>
                        <br/>
                        <br/>
                        <span class="isora mPointer">isora</span> <span class="pepe mPointer">Pepe</span> <span class="australia mPointer">Australia</span>
                    </div>                      
                </div>

好的，所以你有一些项目，当你将它们悬停在一起时，jquery检索类名，检查对象中的cordinades（根据类名）并在图像的cordinades中显示一个光标，对吗？

好的，我怎么能这样做呢？让我们说如果用户在地图中徘徊+ -30px错误边距（上下左右）一个区域，项目会突出显示??? （如果您想看到它的实际效果请http://toniweb.us/gm并点击“立即预订”并将项目悬停在其中

我正在考虑

-on map image mouse over
     - get the offset of the mouse
     - if is in the margin error area  
             -show 
     else 
             -no show

但是，只要它必须计算每个像素的运动，那看起来效率不高，不是吗？

自定义图像标记。标记到图像完成¿和图像标记？

0 个答案: