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

发布于 2024-12-17 11:58:00 字数 3405 浏览 0 评论 0原文

你好,我正在实现一个自定义地理标记系统,好吧

,我存储每个地方的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 检索类名,它检查对象中的坐标(根据类名)并在图像的坐标中显示光标,对吧?

好吧,那我该怎么做呢?假设用户将鼠标悬停在地图中 +-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

但这看起来并不真正有效,只要它必须计算每个像素的移动,不是吗?

Hello there i am implementing a custom geo tagging system, ok

Array where i store the cordenades of each place

/* ******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> */
    }
/**/    

this is how i check with 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>

OK so you have a few items and when you hover one them, jquery retrieves the classname, it checks the cordinades in the object (according the classname) and displays a cursor in the cordinades of the image, right?

ok so how can i do the opposite? lets say if user hovers +-30px error margin (top and left) an area in the map the item is highlighted??? (if you want to see it in action please http://toniweb.us/gm and click on 'Book Now' and hover a item)

i was considering

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

But that does not look really efficient as long as it would have to caculate each pixel movement, no?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文