1

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

谢谢

4

2 回答 2

0

快速说明：元素 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。）

于 2013-03-07T06:54:24.867 回答
0

您很可能对panTo(latLng:LatLng)Map API https://developers.google.com/maps/documentation/javascript/reference#Methods的方法感兴趣。然后，您可以通过事件 ( 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 
});
于 2013-03-07T06:23:32.823 回答