Question

我有一个商店定位器，每次点击一个锚点（例如Zoom Here，Directions或Street View）时，href中的哈希都会将我带到页面顶部。我怎样才能防止这种情况发生？我尝试查看Store Locator源代码，但它已经缩小了，很难弄清楚它是什么。我也尝试将事件委托添加到具有类“action”的锚点，但这也不起作用。

主要功能

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的{{1}}代码的默认行为。 #保留用于跳转到页面上的部分。举一个简单的示例，如果您的#标记的<a>为href，并且您的网页上的某个部分的#movies属性也是{{1}然后点击name会将用户直接带到您网页的movies部分。如果您只是<a href="#movies">，则浏览器会跳到页面的最顶部，因为您没有指定部分名称。

要防止出现这种情况，您至少需要这样做：

movies

你可能还需要包含这样的另一行（取决于你的选择器/设置）：

$(".my-links").on( 'click', function( evt ) { evt.preventDefault(); });将停止点击与选择器匹配的任何元素的默认行为。请参阅here。

$(".my-links").on( 'click', function( evt ) { evt.preventDefault(); evt.stopPropagation(); });将阻止默认事件冒泡DOM，因此它不会被任何父元素捕获。请参阅here。

希望这有帮助

Google地图商店定位器点击跳转到页面顶部

1 个答案: