Php Jquery链接鼠标悬停在google地图上

我目前有一个位置搜索类的网络应用程序，用户可以在其中查找他们感兴趣的地方，现在我已经将搜索结果与谷歌地图集成。这很好，因为结果显示地图将有标记。但是有些标记超出了范围，用户需要缩小才能查看，我如何使用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>

谷歌地图：

<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>

var gmap，gpoints=[]；
var平坦=“”；
var flng=“”；
$（文档）.ready（函数（）{
初始化（）；
});
函数初始化（）{
gmap=new google.maps.Map（document.getElementById（'Map-container'）{
缩放：13，
街景控制：错误，
scaleControl:false，
中心：新的google.maps.LatLng（平面，flng），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
gpoints.push（新点（gmap，，，，，，，gmap.center））；
}
功能点（地图、lat、lng、内容物、中心）{
this.marker=new google.maps.marker({
位置：新google.maps.LatLng（lat，lng），
地图：_地图，
工具提示：内容
});
var gpoint=this；
var tooltip=新的工具提示（{map:_map}，gpoint.marker）；
bindTo（“text”，gpoint.marker，“tooltip”）；
google.maps.event.addListener（gpoint.marker，'mouseover'，function（））{
tooltip.addTip（）；
getPos2（gpoint.marker.getPosition（））；
//_map.panTo（gpoint.marker.getPosition（））
});
google.maps.event.addListener（gpoint.marker，'mouseout'，function（））{
工具提示。移除提示（）；
});      
google.maps.event.addListener（gpoint.marker，'click'，function（））{
_map.setZoom（15）；
_map.setCenter（gpoint.marker.getPosition（））；
});
}

---

谢谢

您很可能对Map API的

panTo（latLng:latLng）

方法感兴趣。然后，您可以通过事件（

hover

）和

a

标记上的一些元数据（如

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

---

请注意：元素id应该是唯一的

最好的处理方法是

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

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

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

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

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