求助 GMarker 问题

[TN]

大家下午好，我最近研究GMarker遇到了瓶颈，实在无法突破，肯定各位高手帮帮忙，

我一直想做一个 鼠标移动到GMarker上，GMarker的文字和背景图同时改变，可是一直没有很好的实现，今天看了一下谷歌的文档，上面给了一个网站，正好是我想要实现的功能，网址如下：http://travellr.com/map

 

可是我研究了半天，也没搞懂它是如何实现，以下是我的瓶颈所在：

1、我为GMarker添加事件 "mouseover", 可以实现改变 标签的图片+文字，但是改变的图片，不能增加宽度，也就是自动适应文本的宽度。

 

2、我看http://travellr.com/map 实现这个功能好像是通过 CSS样式表来做的，但是我通过指定样式表却无法实现这个功能。

 

3、我一直用的是LabeledMarker

谢谢大家

 

 

[TN]

各位达人：

为啥没人解答这个问题呢 ？是我问的太基础，不屑回答，还是太高深，无法回答呢 ？

多少来个大哥指点一下啊 。

[Fei Chen]

来晚了，呵呵

简单看了一下，定义LabledMarker的时候指定labelText属性是一个html元素（包含所有你需要显示的内容，图片，标签等等），在mouseover这个marker的时候改变labelText元素指定的html元素，比如切换css属性等，就可以表现动态的内容。能否自适应主要在于你对这个html元素的内容如何定义

说的比较乱，不知道说清楚没有，没时间给你写例子，也不忍心直接窃取别人的代码，不过你可以用firebug看一下你给的例子，看看他对marker的label是如何定义的

2009/11/18 TN <tian...@hotmail.com>

[Michael]

感谢 Fei Chen 的回答，我现在郁闷的地方是没找到http://travellr.com/map是如何设置mouseover的，它没有在外部明显的修改什么东西，而且他们用的图片都是那种分段式的，有前面和后面，中间是空白的

[Fei Chen]

图片分段那个是css里显示背景图的一点小技巧，他们的mouseover实现其实很简单，就是切换后半截文字的显示或隐藏

我建议你先用一个没有地图的简单页面调试出一段通过mouseover切换不同显示效果的html，然后直接把这一段html加到labelText中去，把定义好的mouseover事件绑定到对应的marker上（注意调整绑定后在事件里指定的dom元素引用，避免错误引用不出效果）

2009/11/18 Michael <tian...@hotmail.com>

[Fei Chen]

还是用代码说话吧，我写了一个简单的例子，不去麻烦传网页了，关键代码如下;

        

        var icon = new GIcon();

        icon.image = 'http://maps.gstatic.com/intl/en_ALL/mapfiles/markerTransparent.png';

        icon.iconSize = new GSize(32, 32);

        icon.iconAnchor = new GPoint(16, 16);

           

        var label_text = "<div style='background-color:#FF0000; padding:2px;'><nobr>我<span id='markerwrapper' style='display:none'> 看见了</span></nobr></div>";

   

        var opts = { 

          "icon": icon,  //应该可以用其他方法去掉默认的icon显示

          "labelText": label_text

        };

        var marker = new LabeledMarker(latlng, opts);

 

        GEvent.addListener(marker, "mouseover", function(){ 

          document.getElementById("markerwrapper").style.display = "";

        });

        GEvent.addListener(marker, "mouseout", function(){

          document.getElementById("markerwrapper").style.display = "none";

        });

 

        map.addOverlay(marker);

2009/11/18 Fei Chen <phini...@gmail.com>