谷歌地图 点击链接时平移到中心
Google Map Pan to center when clicking a link
我正在尝试通过谷歌地图实现以下目标。
目的：当用户点击链接时，谷歌地图将平移到该位置的中心。
当前：用户点击标记，谷歌地图将平移到该位置的中心。
我想我几乎在那里，只是缺少某些功能来让它工作。
这是我当前的js文件：
<script type="text/javascript">
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap',
disableDefaultUI: true
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
// Multiple Markers
var markers = [
['The Great Pyramid of Giza', 29.979123, 31.134266 ],
['Hanging Gardens of Babylon', 32.543609, 44.424070],
['Statue of Zeus at Olympia', 38.099822, 21.583331],
['Temple of Artemis at Ephesus', 37.949929, 27.364802],
['Mausoleum at Halicarnassus', 37.038038, 27.424385],
['Colossus of Rhodes', 36.450964, 28.226221],
['Lighthouse of Alexandria', 31.213883, 29.885638]
];
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.panTo(marker.getPosition());
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(6);
google.maps.event.removeListener(boundsListener);
});
}
</script>
这是我当前的 HTML：
<ul class="nav nav-pills">
<li class="contact-link active"><a data-toggle="pill" data-wonder="The Great Pyramid of Giza" href="#pyramid"><strong>The Great Pyramid of Giza</strong></a></li>
<li class="contact-link"><a data-toggle="pill" data-wonder="Hanging Gardens of Babylon" href="#garden"><strong>Hanging Gardens of Babylon</strong></a></li>
<li class="contact-link"><a data-toggle="pill" data-wonder="Statue of Zeus at Olympia" href="#statue"><strong>Statue of Zeus at Olympia</strong></a></li>
<li class="contact-link"><a data-toggle="pill" data-wonder="Temple of Artemis at Ephesus" href="#temple"><strong>Temple of Artemis at Ephesus</strong></a></li>
<li class="contact-link"><a data-toggle="pill" data-wonder="Mausoleum at Halicarnassus" href="#mausoleum"><strong>Mausoleum at Halicarnassus</strong></a></li>
<li class="contact-link"><a data-toggle="pill" data-wonder="Colossus of Rhodes" href="#collosus"><strong>Colossus of Rhodes</strong></a></li>
<li class="contact-link"><a data-toggle="pill" data-wonder="Lighthouse of Alexandria" href="#lighthouse"><strong>Lighthouse of Alexandria</strong></a></li>
</ul>
<div class="tab-content">
<div id="pyramid" class="tab-pane fade in active">
<p>The Great Pyramid of Giza<br>info:...</p>
</div>
<div id="garden" class="tab-pane fade">
<p>Hanging Gardens of Babylon<br>info:...</p>
</div>
<div id="statue" class="tab-pane fade">
<p>Statue of Zeus at Olympia<br>info:...</p>
</div>
<div id="temple" class="tab-pane fade">
<p>Temple of Artemis at Ephesus<br>info:...</p>
</div>
<div id="mausoleum" class="tab-pane fade">
<p>Mausoleum at Halicarnassus<br>info:...</p>
</div>
<div id="collosus" class="tab-pane fade">
<p>Colossus of Rhodes<br>info:...</p>
</div>
<div id="lighthouse" class="tab-pane fade">
<p>Lighthouse of Alexandria<br>info:...</p>
</div>
</div>
<div id="googleMap" class="mapping" style="height:656px;"></div>
您可以将循环更改为
var wonderlinks = $('[data-wonder]'); // added this line
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// added the following block
wonderlinks.filter(function(){
return $(this).data('wonder') === markers[i][0];
}).on('click', (function(marker){
return function(){
map.panTo(marker.getPosition());
}
})(marker));
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.panTo(marker.getPosition());
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
在 https://jsfiddle.net/5cqc9u5y/1/更新了演示
$(".contact-link a").on("click", function(e){
e.preventDefault();
var curWonder = $(this).attr("data-wonder");
for( var i = 0; i < markers.length; i++ )
{
var curMarker = markers[i];
if( curMarker[0] == curWonder )
{
//curMarker.trigger("click");
new google.maps.event.trigger( curMarker, 'click' );
break;
}//if
}//for()
})
您需要
创建一个google.maps.Marker对象的数组来触发点击：
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.panTo(marker.getPosition());
}
})(marker, i));
gmarkers.push(marker);
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
然后，一种选择是遍历该列表，查找与单击元素中的数据匹配title的标记：
$(".contact-link a").on("click", function(e) {
e.preventDefault();
var curWonder = $(this).attr("data-wonder");
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].getTitle() == curWonder) {
google.maps.event.trigger(gmarkers[i], 'click');
break;
}
}
});
概念验证小提琴
相关文章：
- 打开带有多个标记的谷歌地图链接
- 谷歌地图 API - 指向地点详细信息页面的链接
- 给定带有位置“loc”的链接，搜索使用谷歌地图API从标记中提取纬度和经度
- 谷歌地图路线链接仅在iOS中显示路线预览
- 谷歌地图 点击链接时平移到中心
- 谷歌地图点击链接/选项卡更改标记位置地图
- 谷歌地图api通过点击信息窗口内的链接打开新的信息窗口
- jQuery - 将文本转换为谷歌地图链接
- 使用链接在谷歌地图中切换地面覆盖
- 谷歌地图自定义标记链接不起作用
- 通过单击外部链接来寻址谷歌地图以更改 setZoom
- 通过单击HTML链接在谷歌地图上显示信息窗口
- 超链接在谷歌地图上打开标记信息窗口
- AngularJS和谷歌地图 - 标记上的链接在iOS上无法识别
- 将HTML链接添加到谷歌地图圆圈元素
- 我如何链接到谷歌地图打印方向使用Html5地理定位
- 创建一个链接到谷歌地图，将填充标记
- 如何从Javascript数组创建按钮，链接到谷歌地图标记
- 链接到谷歌地图标记与链接下面的地图
- 超链接谷歌地图标记坐标
