gpt4 book ai didi

php - Jquery链接鼠标悬停平移谷歌地图

转载 作者:行者123 更新时间:2023-11-28 09:19:01 25 4
gpt4 key购买 nike

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

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

谢谢

最佳答案

您很可能对 Map API 的 panTo(latLng:LatLng) 方法感兴趣 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
});

关于php - Jquery链接鼠标悬停平移谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15264405/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com