Google지도 매장 찾기 클릭 이동 페이지 상단으로 이동

Question

매장 검색 기능이 있으며 앵커 (여기서는 확대/축소, 길 찾기 또는 스트리트 뷰)를 클릭 할 때마다 href의 해시가 맨 위로 이동합니다. 그 페이지. 어떻게 이런 일이 일어나지 않도록 할 수 있습니까? Store Locator 소스를 살펴 보았지만, 무엇이 무엇인지 파악하기가 어려웠습니다. 또한 클래스 "액션"을 사용하여 앵커에 이벤트 위임을 추가하려고 시도했지만이 방법도 작동하지 않았습니다.

주요 기능

다음

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

매장 검색 클래스는 매장 검색 라이브러리에 대한 링크입니다

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

: http://storelocator.googlecode.com/git/index.html<a> 태그를 클릭에 대한 브라우저의 기본 동작입니다

Answer 1

그 값은 # 인 href입니다. #은 페이지의 섹션으로 점프하도록 예약되어 있습니다. 당신이 #movies의 href과 <a> 태그, 또한 movies하는 name 속성이 페이지에 섹션, 다음 클릭이있는 경우 쉽게 예를 들어, <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을 참조하십시오.

희망이 있습니다.