我正在尝试使用Google Map实现以下目标。
目标： 当用户点击链接时，Google地图将平移到该位置的中心。
电流： 用户点击Marker，Google Map将平移到该位置的中心。
我认为我几乎缺少某些功能才能让它发挥作用。
这是我当前的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>
答案 0 :(得分：1)
您可以将循环更改为
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);
}
答案 1 :(得分：0)
$(".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()
})
答案 2 :(得分：0)
您需要创建一个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;
}
}
});