Question

我目前有一个位置搜索类型的网络应用程序，用户可以查找他们感兴趣的地方，现在我已将搜索结果与谷歌地图集成。这样可以正常显示地图将具有标记。但是一些标记超出范围，用户需要在它们可以查看之前缩小，我如何使用jquery，以便如果用户将鼠标悬停在列表a标记上，地图将自动播放以查找相关标记？ Folowing是我的代码：

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

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

由于

Answer 1

您最有可能对Map API https://developers.google.com/maps/documentation/javascript/reference#Methods的panTo(latLng:LatLng)方法感兴趣。然后，您可以通过事件（hover）和a标记上的一些元数据（例如

）简单地在JS中处理它

<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 
});

Answer 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。）

Jquery链接鼠标悬停谷歌地图

2 个答案: