의견 : 오늘 우리는 HTML5 지리적 위치를 결합하여 작은 응용 프로그램을 개발할 것입니다. 관심있는 친구들은 그것에 대해 배울 수 있습니다. 단점이 있다면, 영웅이 당신에게 조언을 해주길 바랍니다.
오늘 우리는 HTML5의 지리적 위치를 Google지도와 결합하여 작은 응용 프로그램을 개발할 것입니다. Google Maps의 API 주소 : https://developers.google.com/maps/documentation/javaScript/?hl=zh-cn.Google지도를 호출하려면 구현은 JS 참조 <script type = text/javaScript src =? sensor = false> </script>를 추가해야합니다. 여기서 센서 매개 변수의 특정 의미 :
Google Maps API를 사용하려면 애플리케이션이 모든 맵 API 라이브러리에서 센서 (예 : GPS 로케이터)를 사용하여 사용자의 위치를 결정하는지 여부를 표시해야합니다. 이것은 모바일 장치에 특히 중요합니다. Google Maps API 애플리케이션이 모든 형태의 센서를 사용하여 응용 프로그램에 액세스하는 장치의 위치를 결정하는 경우 센서 매개 변수 값을 True로 설정하여이를 선언해야합니다.
HTML 부분은 비교적 간단하며 DIV 만 준비하면됩니다.
<body>
<div>
</div>
</body>
JS 코드의 프레임 워크는 다음과 같습니다.
<script type = "text/javaScript">
var지도;
var browsersupport = false;
var 시도 = 0;
$ (document) .ready (function () {
// 맵을 초기화합니다
initmap ();
//위치
getLocation ();
// 위치 추적
Watchlocation ();
});
함수 initMap () {
/ *지도의 모든 옵션 설정 */
var 옵션 = {
};
/ * 응용 프로그램에 대한 새지도 생성 */
map = new Google.maps.map ($ ( '#map') [0], 옵션);
}
/*
* W3C Geolocation 객체를 사용할 수있는 경우 현재를 얻으십시오.
* 위치, 그렇지 않으면 문제를보고하십시오
*/
함수 getLocation () {
}
기능 감시 위치 () {
}
/ *지도의 위치를 플로팅하고 확대 */
함수 plotLocation (위치) {
}
/ *이 기능을 사용하여 오류를보고 */
함수 보고서 프로토 블렘 (e) {
}
</스크립트>
InitMap 방법은 Google Maps API를 호출하여 맵을 초기화하는 것입니다. 옵션 객체를 설정하고 맵 초기화를 호출 할 때 사용해야합니다.
함수 initMap () {
/ *지도의 모든 옵션 설정 */
var 옵션 = {
줌 : 4,
센터 : 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 : 사실,
Pancontroloptions : {
위치 : Google.maps.controlposition.top_right
},
ZoomControl : True,
줌 컨트롤로 션 : {
스타일 : google.maps.zoomcontrolstyle.large,
위치 : Google.maps.controlposition.left_center
},
scalecontrol : true,
scalecontroloptions : {
위치 : Google.maps.controlposition.bottom_left
},
StreetViewControl : True,
streetViewControloptions : {
위치 : Google.maps.controlposition.left_top
}
};
/ * 응용 프로그램에 대한 새지도 생성 */
map = new Google.maps.map ($ ( '#map') [0], 옵션);
}
포지셔닝 정보를 얻기위한 GetLocation 및 Watchlocation 방법.
함수 getLocation () {
/ * 브라우저가 W3C 지리적 위치 API를 지원하는지 확인하십시오 */
if (navigator.geolocation) {
Browsersupport = true;
navigator.geolocation.getCurrentPosition (PlotLocation, ReportProblem, {timeout : 45000});
} 또 다른 {
reportProblem ();
}
}
기능 감시 위치 () {
/ * 브라우저가 W3C 지리적 위치 API를 지원하는지 확인하십시오 */
if (navigator.geolocation) {
Browsersupport = true;
navigator.geolocation.WatchPosition (PlotLocation, ReportProblem, {timeout : 45000});
} 또 다른 {
reportProblem ();
}
}
위치 정보를 성공적으로 얻은 후 PlotLocation 메소드에 전화하여 Google지도에 위치를 표시하십시오.
함수 plotLocation (위치) {
시도 = 0;
var point = new Google.maps.latlng (position.coords.latitude, position.longitude);
var 마커 = 새로운 Google.maps.marker ({
위치 : 포인트
});
Marker.setMap (맵);
map.setCenter (point);
Map.setzoom (15);
}
데모 다운로드 주소 : googlemapgeolocation.rar