jQuery链接鼠标悬停泛谷歌地图答案

【问题标题】：Jquery link mouseover pan google mapsjQuery链接鼠标悬停泛谷歌地图
【发布时间】：2013-03-07 06:15:58
【问题描述】：

我目前有一个位置搜索类型的网络应用程序，用户可以在其中查找他们感兴趣的地方，现在我已经将搜索结果与谷歌地图集成。这很好用，因为结果显示地图将有标记。但是一些标记超出了用户需要缩小才能查看它的范围，我如何使用 jquery 以便如果用户将鼠标悬停在列表a 标签上，地图将自动平移以查找相关标记？以下是我的代码：

<div class="businessresult clearfix" uid="5">
<h4 class="itemheading" id="bizTitle0">
            <a id="bizTitleLink0" href="/business/hotel5">1.Hotel5</a>
</h4>
</div>
<div class="businessresult clearfix" uid="4">
<h4 class="itemheading" id="bizTitle0">
            <a id="bizTitleLink0" href="/business/hotel4">2.Hotel4 </a>
</h4>
</div>
<div class="businessresult clearfix" uid="3">
<h4 class="itemheading" id="bizTitle0" >
            <a id="bizTitleLink0" href="/business/hotel3">3.Hotel3 </a>
</h4>
</div>

谷歌地图js：

<script type="text/javascript">
var gmap, gpoints = [];
var flat = '<?=$this->biz[0]["y"]?>';
var flng = '<?=$this->biz[0]["x"]?>';

$(document).ready(function() {
        initialize();
    });


function initialize() {

        gmap = new google.maps.Map(document.getElementById('map-container'), {
            zoom:               13,
            streetViewControl:  false,
            scaleControl:       false,
            center: new google.maps.LatLng(flat, flng),
            mapTypeId:          google.maps.MapTypeId.ROADMAP

        });


<?php
        foreach ($this->paginator as $bizArr) {
            $lat = $bizArr['y'];
            $long = $bizArr['x'];
            $name = addslashes($bizArr['business_name']);
            $rating = $bizArr['rating'];
            $content = '';
?> 
gpoints.push( new point(gmap, '<?=$lat; ?>', '<?=$long; ?>', '<?php echo $content; ?>',gmap.center) );
        <?php } ?>

    }



function point(_map, lat, lng, content,center) {
         this.marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            map: _map,
            tooltip: content
        });

        var gpoint = this;
        var tooltip = new Tooltip({map: _map}, gpoint.marker);
        tooltip.bindTo("text", gpoint.marker, "tooltip");
        google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
            tooltip.addTip();
            tooltip.getPos2(gpoint.marker.getPosition());
            //_map.panTo(gpoint.marker.getPosition())
        });



        google.maps.event.addListener(gpoint.marker, 'mouseout', function() {
            tooltip.removeTip();
        });      

        google.maps.event.addListener(gpoint.marker, 'click', function() {
        _map.setZoom(15);
        _map.setCenter(gpoint.marker.getPosition());
        });

    }

</script>

谢谢

【问题讨论】：

标签： php javascript jquery google-maps google-maps-api-3

【解决方案1】：

您很可能对 Map API https://developers.google.com/maps/documentation/javascript/reference#Methods 的 panTo(latLng:LatLng) 方法感兴趣。然后，您可以通过事件（hover）在 JS 中简单地处理它，以及 a 标记上的一些元数据，例如

<a id="biz" href="http://somewhere.com" lat="12.345" lng="12.345">Biz</a>

在 JS 方面

$('#biz').hover(function() {
   var point = new google.maps.LatLng($('#biz').attr('lat'), $('#biz').attr('lng'));
   gmap.panTo(point); // where map is 
});

【讨论】：

【解决方案2】：

简单说明：元素 id 应该是唯一的。

处理这个问题的最好方法是拥有

<a id="bizTitleLink_5" href="/business/hotel5" onmouseover="javascript:panTo(5)">1.Hotel5</a>

然后在你的 js 中有类似的东西

function panTo(id){
    map.panTo(markers[id].getPoint());
}

显然，您将了解更多有关如何调用地图以及标记上的 id 设置的信息，因此您可能需要使用它。

（如果您只是使用锚 id 进行样式设置，只需通过 '.businessresult a' 引用它并从锚中删除 id。）

【讨论】：