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

Google Maps Store Locator Click Jumps to Top of Page

本文关键字：顶部 定位器 谷歌地图      更新时间：2023-09-26

我有一个商店定位器，每次我点击锚点(例如"缩放此处"、"路线"或"街景"(时，href 中的哈希值都会将我带到页面顶部。如何防止这种情况发生？我尝试查看商店定位器来源，但它被缩小了，很难弄清楚什么是什么。我还尝试使用类"操作"将事件委托添加到锚点，但这也没有用。

主要功能

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
    });
});

商店定位器类

/** @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

这是

浏览器中单击href值为 # 的 <a> 标签的默认行为。保留#用于跳转到页面上的各个部分。举个简单的例子，如果你有一个href为 #movies 的 <a> 标签，并且你的页面上有一个部分的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()将停止单击与选择器匹配的任何元素的默认行为。看这里。

stopPropagation()将阻止默认事件冒泡 DOM，因此它不会被任何父元素捕获。看这里。

希望这有帮助

相关文章：