ความคิดเห็น: วันนี้เราจะรวมตำแหน่งทางภูมิศาสตร์ HTML5 เพื่อพัฒนาแอปพลิเคชันขนาดเล็ก เพื่อนที่สนใจสามารถเรียนรู้ได้ หากมีข้อบกพร่องใด ๆ ฉันหวังว่าฮีโร่จะให้คำแนะนำแก่คุณ
วันนี้เราจะรวมตำแหน่งทางภูมิศาสตร์ของ HTML5 เข้ากับ Google Maps เพื่อพัฒนาแอปพลิเคชันขนาดเล็ก ที่อยู่ Google Maps 'API: https://developers.google.com/maps/documentation/javascript/?hl=zh-cnในการเรียกใช้ Google Maps การใช้งานจะต้องเพิ่มการอ้างอิง JS <script type = text/javascript src =? sensor = false> </script> ซึ่งความหมายเฉพาะของพารามิเตอร์เซ็นเซอร์:
ในการใช้ Google Maps API คุณต้องระบุว่าแอปพลิเคชันของคุณใช้เซ็นเซอร์ (เช่นตัวระบุตำแหน่ง GPS) ในไลบรารี API MAPS หรือคำขอบริการใด ๆ เพื่อพิจารณาว่าผู้ใช้อยู่ที่ไหน นี่เป็นสิ่งสำคัญอย่างยิ่งสำหรับอุปกรณ์มือถือ หากแอปพลิเคชัน Google Maps API ของคุณใช้เซ็นเซอร์รูปแบบใด ๆ เพื่อกำหนดตำแหน่งของอุปกรณ์ที่เข้าถึงแอปพลิเคชันของคุณคุณต้องประกาศสิ่งนี้โดยการตั้งค่าพารามิเตอร์เซ็นเซอร์เป็น TRUE
ส่วน HTML นั้นค่อนข้างง่ายคุณจะต้องเตรียม DIV เท่านั้น:
<body>
<div>
</div>
</body>
กรอบของรหัส JS มีดังนี้:
<script type = "text/javascript">
แผนที่ var;
VAR BROWSERSUPPORT = FALSE;
ความพยายาม var = 0;
$ (เอกสาร) .ready (function () {
// เริ่มต้นแผนที่
initmap ();
//ตำแหน่ง
getLocation ();
// การติดตามตำแหน่ง
watchlocation ();
-
ฟังก์ชั่น initmap () {
/ * ตั้งค่าตัวเลือกทั้งหมดสำหรับแผนที่ */
ตัวเลือก var = {
-
/ * สร้างแผนที่ใหม่สำหรับแอปพลิเคชัน */
MAP = ใหม่ google.maps.map ($ ('#map') [0], ตัวเลือก);
-
-
* หากมีวัตถุตำแหน่งทางภูมิศาสตร์ W3C ให้รับกระแสไฟฟ้า
* ที่ตั้งมิฉะนั้นรายงานปัญหา
-
ฟังก์ชั่น getLocation () {
-
function watchlocation () {
-
/ * พล็อตตำแหน่งบนแผนที่และซูมไปที่มัน */
ฟังก์ชัน plotLocation (ตำแหน่ง) {
-
/ * รายงานข้อผิดพลาดใด ๆ โดยใช้ฟังก์ชั่นนี้ */
ฟังก์ชั่นรายงานรายงาน (e) {
-
</script>
วิธีการเริ่มต้นคือการโทรหา Google Maps API เพื่อเริ่มต้นแผนที่ จำเป็นต้องตั้งค่าวัตถุตัวเลือกและใช้เมื่อเรียกการเริ่มต้นแผนที่
ฟังก์ชั่น initmap () {
/ * ตั้งค่าตัวเลือกทั้งหมดสำหรับแผนที่ */
ตัวเลือก var = {
ซูม: 4,
ศูนย์: ใหม่ google.maps.latlng (38.6201, -90.2003),
MapTypeId: google.maps.maptypeid.roadmap,
MapTypecontrol: จริง
MapTypecontroloptions: {
สไตล์: google.maps.maptypecontrolstyle.horizontal_bar
ตำแหน่ง: google.maps.controlposition.bottom_center
-
Pancontrol: จริง
Pancontroloptions: {
ตำแหน่ง: google.maps.controlposition.top_right
-
ZoomControl: จริง
zoomcontroloptions: {
สไตล์: google.maps.zoomcontrolstyle.large
ตำแหน่ง: google.maps.controlposition.left_center
-
Scalecontrol: จริง
Scalecontroloptions: {
ตำแหน่ง: google.maps.controlposition.bottom_left
-
StreetViewControl: จริง
StreetViewControloptions: {
ตำแหน่ง: google.maps.controlposition.left_top
-
-
/ * สร้างแผนที่ใหม่สำหรับแอปพลิเคชัน */
MAP = ใหม่ google.maps.map ($ ('#map') [0], ตัวเลือก);
-
วิธีการ getLocation และ watchlocation เพื่อรับข้อมูลการวางตำแหน่ง
ฟังก์ชั่น getLocation () {
/ * ตรวจสอบว่าเบราว์เซอร์รองรับ W3C GeoLocation API *//
if (navigator.geolocation) {
เบราว์เซอร์ซูเปอร์พอร์ต = จริง;
Navigator.geolocation.getCurrentPosition (PlotLocation, ReportProblem, {หมดเวลา: 45000});
} อื่น {
reportproblem ();
-
-
function watchlocation () {
/ * ตรวจสอบว่าเบราว์เซอร์รองรับ W3C GeoLocation API *//
if (navigator.geolocation) {
เบราว์เซอร์ซูเปอร์พอร์ต = จริง;
navigator.geolocation.watchposition (plotlocation, reportproblem, {หมดเวลา: 45000});
} อื่น {
reportproblem ();
-
-
หลังจากได้รับข้อมูลตำแหน่งที่ประสบความสำเร็จให้โทรหาวิธี PlotLocation เพื่อแสดงตำแหน่งบน Google Maps
ฟังก์ชัน plotLocation (ตำแหน่ง) {
ความพยายาม = 0;
var point = ใหม่ google.maps.latlng (position.coords.latitude, position.coords.longitude);
var marker = ใหม่ google.maps.marker ({
ตำแหน่ง: จุด
-
marker.setMap (แผนที่);
map.setCenter (จุด);
map.setzoom (15);
-
ที่อยู่ดาวน์โหลดตัวอย่าง: googlemapgeolocation.rar