我是第一次使用 Google 地图,所以我在 CSS Tricks 上查看了一个很好的教程:http://css-tricks.com/google-maps-slider/ http://css-tricks.com/google-maps-slider/与纯 JS 相比,我更喜欢使用 jQuery,本教程提供了一种很好的方法来单击列表中的某个位置以在地图中显示标记。
我喜欢这样,但我需要将信息窗口添加到标记中。我这样做了,但是当我单击列表中的某个位置并且地图平移时,信息窗口保持打开状态!我认为这是因为我需要将 infowindow.close() 附加到单击“#locations li”的事件。
这是我的代码,它在 document.ready 上运行:
$(function() {
var chicago = new google.maps.LatLng(41.924832, -87.697456),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 10,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").click(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
// Clear current marker
curMarker.setMap();
// Set zoom back to Chicago level
// map.setZoom(10);
}
// Move (pan) map to new location
function move(){
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
}
move();
// Add new marker
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map
});
// Infowindow: contenido
var contentString = '<p>'+$el.find("h3").html()+'</p>';
contentString += 'hola' ;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
content: contentString
});
// On click, zoom map
google.maps.event.addListener(curMarker, 'click', function() {
//map.setZoom(14);
infowindow.open(map,curMarker);
});