谷歌地圖商店定位器點擊跳轉到頁首

Question

我有一個商店定位器，每次點擊一個錨點（比如放大縮小，方向或街景）時，href中的哈希帶我到頂部這一頁。我怎樣才能防止這種情況發生？我嘗試了一下Store Locator的源代碼，但它被縮小了，很難弄清楚是什麼。我也嘗試將事件代表添加到類「動作」的錨中，但這也不起作用。

主要功能

google.maps.event.addDomListener(window, 'load', function() { 
    var map = new google.maps.Map(document.getElementById('mappanel'), { 
     center: new google.maps.LatLng(56.102683, 10.452576), 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var panelDiv = document.getElementById('searchpanel'); 
    var data = new storeSource; 
    var view = new storeLocator.View(map, data, { 
     geolocation: false 
    }); 
    new storeLocator.Panel(panelDiv, { 
     view: view 
    }); 
}); 

storeLocator類

/** @extends storeLocator.StaticDataFeed */ 
function storeSource() { 
    jQuery.extend(this, new storeLocator.StaticDataFeed); 
    var that = this; 
    jQuery.get('/components/com_maps/storeSource.csv', function(data) { 
    that.setStores(that.parse_(data)); 
    }); 
} 

/** @private */ 
storeSource.prototype.parse_ = function(csv) { 
    var stores = []; 
    var rows = csv.split('\r'); 
    var headings = this.parseRow_(rows[0]); 
    for (var i = 1, row; row = rows[i]; i++) { 
    row = this.toObject_(headings, this.parseRow_(row)); 
    if(row.adresse.length > 3) { 
     row.lat = row.lat.replace(",", "."); 
     row.lng = row.lng.replace(",", "."); 
     var position = new google.maps.LatLng(row.lat, row.lng); 
     var locality = this.join_([row.postnr, row.by], ', '); 
     var store = new storeLocator.Store(row.uid, position, null, { 
     title: row.navn, 
     address: this.join_([row.adresse, locality, row.land], '<br>'), 
     phone: row.tlfnr 
     }); 
     stores.push(store); 
    } 
    } 
    return stores; 
}; 
/** Joins elements of an array that are non-empty and non-null. */ 
storeSource.prototype.join_ = function(arr, sep) { 
    var parts = []; 
    for (var i = 0, ii = arr.length; i < ii; i++) { 
    arr[i] && parts.push(arr[i]); 
    } 
    return parts.join(sep); 
}; 
/*** CSV parsing */ 
storeSource.prototype.parseRow_ = function(row) { 
    // Each row in the CSV file only has ; as delimiter 
    row = row.split(';'); 
    return row; 
}; 
/** Creates an object mapping headings to row elements. */ 
storeSource.prototype.toObject_ = function(headings, row) { 
    var result = {}; 
    for (var i = 0, ii = row.length; i < ii; i++) { 
    result[headings[i]] = row[i]; 
    } 
    return result; 
}; 

這裏的商店定位器庫的鏈接：http://storelocator.googlecode.com/git/index.html

Answer 1

即在瀏覽器的默認行爲的點擊一個<a>標籤它的href值爲#。 #保留跳轉到頁面上的部分。作爲一個簡單的例子，如果你有一個<a>標籤與#movies的href，並具有name屬性，這也是movies網頁上的某部分，然後點擊<a href="#movies">會直接將用戶帶到你的頁面的movies部分。如果您只有#，那麼瀏覽器會跳到頁面的頂部，因爲您沒有指定節名稱。

爲了防止這種行爲，你需要做的，至少這一點：

$(".my-links").on('click', function(evt) { 
    evt.preventDefault(); 
}); 

而且你可能還需要包括另一條線路是這樣的（根據您的選擇/設置）：

$(".my-links").on('click', function(evt) { 
    evt.preventDefault(); 
    evt.stopPropagation(); 
}); 

preventDefault()將停止點擊與選擇器匹配的任何元素的默認行爲。見here。

stopPropagation()將停止冒泡DOM的默認事件，所以它不會被任何父元素捕獲。見here。

希望這會有幫助