1

私は現在、ユーザーが興味のある場所を見つけることができる場所検索のような Web アプリを持っていますが、検索結果を Google マップと統合しました。これは、マップにマーカーが表示されるため、問題なく機能します。しかし、一部のマーカーは範囲外にあり、ユーザーが表示する前にズームアウトする必要がありますa.jqueryを使用して、ユーザーがリストタグにマウスを合わせると、マップが自動パンして関連するマーカーを見つけることができますか? 以下は私のコードです：

<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 マップ 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

panTo(latLng:LatLng)おそらく、Map API https://developers.google.com/maps/documentation/javascript/reference#Methodsのメソッドに興味があるでしょう。hoverその後、イベント ( )を介してaJSで簡単に処理できます。

<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 に答える
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 に答える