집 > 기사 > 웹 프론트엔드 > HTML5 가이드-7. 작은 application_html5 튜토리얼 기술을 개발하기 위해 Google 지도와 결합된 위치정보

HTML5 가이드-7. 작은 application_html5 튜토리얼 기술을 개발하기 위해 Google 지도와 결합된 위치정보

WBOY원래의: 2016-05-16 15:50:221739검색

오늘 우리는 HTML5 위치정보와 Google 지도를 결합하여 작은 애플리케이션을 개발할 것입니다. Google 지도 API 주소: https://developers.google.com/maps/documentation/javascript/?hl=zh-CN.
Google 지도를 호출하려면 js 참조를 추가해야 합니다

InitMap 메소드는 Google Maps API를 호출하여 지도를 초기화해야 합니다. 지도 초기화를 호출할 때 사용하세요.

코드 복사코드는 다음과 같습니다.

function InitMap() {

/ * 지도에 대한 모든 옵션 설정 */
var options = {
zoom: 4,
center: new google.maps.LatLng(38.6201, -90.2003),
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
스타일: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
위치: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
위치: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
스타일: google.maps .ZoomControlStyle.LARGE,
위치: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
위치: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}/* application */
map = new google.maps.Map($('#map')[0], options);
}

getLocation 및 watchLocation 메소드는 위치 정보를 얻습니다. .

코드 복사

코드는 다음과 같습니다.

function getLocation() {

/ * 브라우저가 W3C Geolocation API를 지원하는지 확인하세요 */

if (navigator.geolocation) {
browserSupport =
navigator.geolocation.getCurrentPosition(plotLocation, reportProblem, { timeout: 45000 } );
} else {
reportProblem();
}
}
function watchLocation() {
/* 브라우저가 W3C Geolocation API를 지원하는지 확인하세요. */
if (navigator .geolocation) {
browserSupport =
navigator.geolocation.watchPosition(plotLocation, reportProblem, { timeout: 45000 })
} else {
reportProblem(); }
}

위치 정보를 성공적으로 얻은 후 줄거리 위치 메소드를 호출하여 Google 지도에 위치를 표시합니다.

코드 복사

코드는 다음과 같습니다.

functionplotLocation(position) {
시도 = 0;
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
var marker = new google.maps.Marker({
위치: 포인트
}); marker.setMap(map);
map.setCenter(point)
map.setZoom(15)

데모 다운로드 주소:

googleMapGeolocation.rar

성명：

이전 기사：html5 css3을 사용하여 슬라이더 전환 효과 얻기 javascript css_html5 튜토리얼 기술에 작별 인사다음 기사：html5 css3을 사용하여 슬라이더 전환 효과 얻기 javascript css_html5 튜토리얼 기술에 작별 인사

HTML5 가이드-7. 작은 application_html5 튜토리얼 기술을 개발하기 위해 Google 지도와 결합된 위치정보

관련 기사