របៀបបន្ថែមផែនទី Google ទៅទំព័របណ្តាញរបស់អ្នក

01 នៃ 05

ទទួលបានគន្លឹះ API ផែនទី Google សម្រាប់តំបន់បណ្ដាញរបស់អ្នក

មធ្យោបាយល្អបំផុតដើម្បីបន្ថែមផែនទីហ្គូហ្គលរបស់អ្នកទៅកាន់គេហទំព័ររបស់អ្នកគឺប្រើ Google ផែនទី API ។ ហើយ Google បានណែនាំឱ្យអ្នកទទួលបានកូនសោ API ដើម្បីប្រើផែនទី។

អ្នកមិនត្រូវបានតម្រូវឱ្យទទួលយកកូនសោ API ដើម្បីប្រើ Google Maps API v3 នោះទេប៉ុន្តែវាមានអត្ថប្រយោជន៍ណាស់ព្រោះវាអនុញ្ញាតឱ្យអ្នកត្រួតពិនិត្យការប្រើប្រាស់របស់អ្នកនិងបង់ប្រាក់សម្រាប់ការចូលបន្ថែម។ Google Maps API v3 មានកូតាចំនួន 1 សំណើក្នុងមួយវិនាទីក្នុងមួយអ្នកប្រើទៅចំនួនអតិបរិមាចំនួន 25,000 សំណើក្នុងមួយថ្ងៃ។ ប្រសិនបើទំព័ររបស់អ្នកលើសពីដែនកំណត់ទាំងនោះអ្នកត្រូវបើកវិក័យប័ត្រដើម្បីទទួលបានច្រើនជាងនេះ។

វិធីដើម្បីទទួលបានគន្លឹះ API ផែនទី Google

1. ចូលទៅ Google ដោយប្រើគណនី Google របស់អ្នក។
2. ចូលទៅកុងសូលអ្នកអភិវឌ្ឍន៍
3. រមូរតាមបញ្ជីហើយរកឃើញ Google Maps API v3 បន្ទាប់ចុចប៊ូតុង "បិទ" ដើម្បីបើកវា។
4. អាននិងយល់ព្រមចំពោះលក្ខខណ្ឌ។
5. ចូលទៅកាន់កុងសូល APIs ហើយជ្រើសរើស "API Access" ពីម៉ឺនុយខាងឆ្វេង
6. ក្នុងផ្នែក "ចូលប្រើ API សាមញ្ញ" ចុចប៊ូតុង "បង្កើតលេខកូដម៉ាស៊ីនមេថ្មី ... " ។
7. បញ្ចូលអាសយដ្ឋាន IP នៃម៉ាស៊ីនមេរបស់អ្នក។ នេះគឺជា IP ដែលសំណើផែនទីរបស់អ្នកនឹងត្រូវបានមកពី។ ប្រសិនបើអ្នកមិនស្គាល់អាសយដ្ឋាន IP របស់អ្នកអ្នកអាចរកមើលវាបាន។
8. ចម្លងអត្ថបទនៅលើបន្ទាត់ "API:" (មិនរាប់បញ្ចូលចំណងជើងនោះទេ) ។ នេះគឺជាកូនសោ API របស់អ្នកសម្រាប់ផែនទីរបស់អ្នក។

02 នៃ 05

បម្លែងអាស័យដ្ឋានរបស់អ្នកទៅជាកូអរដោនេ

ដើម្បីប្រើផែនទី Google នៅលើទំព័របណ្ដាញរបស់អ្នកអ្នកត្រូវមានរយៈទទឹងនិងរយៈបណ្តោយសម្រាប់ទីតាំង។ អ្នកអាចទទួលបានទាំងនេះពី GPS ឬអ្នកអាចប្រើឧបករណ៍តាមអ៊ីនធឺណិតដូច Geocoder.us ដើម្បីប្រាប់អ្នក។

1. ចូលទៅកាន់ Geocoder.us ហើយវាយបញ្ចូលអាសយដ្ឋានរបស់អ្នកនៅក្នុងប្រអប់ស្វែងរក។
2. ចម្លងលេខដំបូងសម្រាប់រយៈទទឹង (ដោយគ្មានអក្សរនៅពីមុខ) ហើយបិទភ្ជាប់វាទៅក្នុងឯកសារអត្ថបទ។ អ្នកមិនត្រូវការសញ្ញាបត្រដឺក្រេ (º) ទេ។
3. ចម្លងលេខដំបូងសម្រាប់រយៈបណ្តោយ (ជាថ្មីម្តងទៀតដោយគ្មានអក្សរនៅពីមុខ) ហើយបិទភ្ជាប់វាទៅក្នុងឯកសារអត្ថបទរបស់អ្នក។

រយៈទទឹងនិងរយៈបណ្តោយរបស់អ្នកនឹងមើលទៅដូចនេះ:

40.756076
-73.990838

Geocoder.us ធ្វើការតែសម្រាប់អាសយដ្ឋានរបស់សហរដ្ឋអាមេរិកប៉ុណ្ណោះប្រសិនបើអ្នកត្រូវការទទួលកូអរដោនេនៅប្រទេសផ្សេងទៀតអ្នកគួរតែស្វែងរកឧបករណ៍ស្រដៀងគ្នានៅក្នុងតំបន់របស់អ្នក។

03 នៃ 05

ការបន្ថែមផែនទីទៅគេហទំព័ររបស់អ្នក

ដំបូងបន្ថែមស្គ្រីបផែនទីទៅ

នៃឯកសាររបស់អ្នក

បើកទំព័របណ្តាញរបស់អ្នកនិងបន្ថែមដូចខាងក្រោមទៅ HEAD នៃឯកសាររបស់អ្នក។

ផ្លាស់ប្តូរផ្នែកដែលបានបន្លិចទៅកាន់លេខទូរស័ព្ទនិងរយៈបណ្តោយដែលអ្នកបានសរសេរនៅក្នុងជំហានទី 2 ។

ទីពីរបន្ថែមធាតុផែនទីទៅទំព័ររបស់អ្នក

នៅពេលអ្នកមានធាតុស្គ្រីបទាំងអស់ដែលបានបន្ថែមទៅ HEAD នៃឯកសាររបស់អ្នកអ្នកត្រូវដាក់ទីតាំងផែនទីរបស់អ្នកនៅលើទំព័រ។ អ្នកធ្វើដូច្នេះដោយបន្ថែមធាតុ DIV ដែលមានគុណលក្ខណៈ id = "map-canvas" ។ ខ្ញុំសូមផ្តល់អនុសាសន៍ឱ្យអ្នករចនារចនាប័ទ្មនេះជាមួយទទឹងនិងកំពស់ដែលនឹងត្រូវនឹងទំព័ររបស់អ្នក:

ទីបំផុតផ្ទុកឡើងនិងសាកល្បង

រឿងចុងក្រោយដែលត្រូវធ្វើគឺផ្ទុកឡើងទំព័ររបស់អ្នកហើយសាកល្បងថាផែនទីរបស់អ្នកបង្ហាញ។ នេះជាឧទាហរណ៍នៃផែនទី Google នៅលើទំព័រ។ ចំណាំ, ដោយសារតែវិធីសាស្រ្ត CMS About.com ធ្វើការ, អ្នកនឹងត្រូវចុចលើតំណដើម្បីទទួលបានផែនទីដើម្បីបង្ហាញ។ នេះនឹងមិនមែនជាករណីនៅលើទំព័ររបស់អ្នកទេ។

ប្រសិនបើផែនទីរបស់អ្នកមិនបង្ហាញសូមសាកល្បងដាក់វាជាមួយគុណលក្ខណៈ BODY:

onload = "initialize ()" >

រឿងផ្សេងទៀតដើម្បីពិនិត្យមើលថាតើផែនទីរបស់អ្នកមិនមានផ្ទុករួមមាន:

• រកមើលកំហុសឆ្គងនៅក្នុង JavaScript របស់អ្នករួមបញ្ចូលទាំងករណី។ JavaScript គឺប្រកាន់អក្សរតូចធំ។
• ត្រូវប្រាកដថាអ្នកបានកំណត់ជម្រើសពង្រីកនិងកណ្តាល។
• ត្រូវប្រាកដថាធាតុ DIV របស់អ្នកស្ថិតនៅលើទំព័រដែលមានលេខសម្គាល់ត្រឹមត្រូវ។
• ត្រូវប្រាកដថាធាតុ DIV របស់អ្នកមានកម្ពស់។

04 នៃ 05

បន្ថែមសញ្ញាសម្គាល់ទៅផែនទីរបស់អ្នក

ប៉ុន្តែអ្វីដែលជាផែនទីនៃទីតាំងរបស់អ្នកល្អបើសិនជាគ្មានផ្លាកសញ្ញាប្រាប់មនុស្សថាពួកគេគួរតែទៅណាទេ?

ដើម្បីបន្ថែមសញ្ញាសម្គាល់ក្រហម Google ផែនទីស្ដង់ដារបន្ថែមដូចខាងក្រោមទៅស្គ្រីបរបស់អ្នកនៅខាងក្រោមបន្ទាត់ផែនទី var = ... var:

var myLatlng = google.maps.LatLng ថ្មី ( រយៈទទឹង, រយៈបណ្ដោយ );
var marker = new google.maps.Marker ({
ទីតាំង: myLatlng,
ផែនទី: ផែនទី,
ចំណងជើង: " អតីតទីស្នាក់ការការិយាល័យកណ្ដាល "
});

ផ្លាស់ប្តូរអត្ថបទដែលបានបន្លិចទៅរយៈទទឹងនិងរយៈបណ្តោយនិងចំណងជើងដែលអ្នកចង់បង្ហាញនៅពេលមនុស្សដាក់លើសញ្ញាសម្គាល់។

អ្នកអាចបន្ថែមចំណុចសម្គាល់ច្រើនតាមទំព័រដែលអ្នកចង់បានគ្រាន់តែបន្ថែមអថេរថ្មីជាមួយកូអរដោនេថ្មីនិងចំណងជើងប៉ុន្តែប្រសិនបើផែនទីតូចពេកដើម្បីបង្ហាញសញ្ញាសម្គាល់ទាំងអស់នោះវានឹងមិនបង្ហាញទេលុះត្រាតែអ្នកអានហាប់ចេញ។

var latlng 2 = google.maps.LatLng ថ្មី ( 37.3316591, -122.0301778 );
var myMarker 2 = google.maps.Marker ថ្មី ({
មុខតំណែង: លលា 2 ,
ផែនទី: ផែនទី,
ចំណងជើង: " Apple Computer "
});

នេះជាឧទាហរណ៍នៃផែនទីហ្គូហ្គលដែលមានសញ្ញាសម្គាល់។ ចំណាំ, ដោយសារតែវិធីសាស្រ្ត CMS About.com ធ្វើការ, អ្នកត្រូវតែចុចលើតំណដើម្បីទទួលបានផែនទីដើម្បីបង្ហាញ។ នេះនឹងមិនមែនជាករណីនៅលើទំព័ររបស់អ្នកទេ។

05 នៃ 05

បន្ថែមផែនទីទីពីរ (ឬច្រើនទៀត) ទៅកាន់ទំព័ររបស់អ្នក

ប្រសិនបើអ្នកបានក្រឡេកមើលគំរូផែនទី Google របស់ខ្ញុំអ្នកនឹងកត់សំគាល់ថាខ្ញុំមានផែនទីច្រើនជាងមួយដែលបង្ហាញនៅលើទំព័រ។ នេះគឺងាយស្រួលណាស់។ នេះជារបៀប។

1. ទទួលបានរយៈទទឹងនិងរយៈបណ្តោយនៃផែនទីទាំងអស់ដែលអ្នកចង់បង្ហាញដូចដែលយើងបានដឹងនៅជំហានទី 2 នៃការបង្រៀននេះ។
2. បញ្ចូលផែនទីទី 1 ដូចដែលយើងបានរៀននៅជំហានទី 3 នៃមេរៀននេះ។ ប្រសិនបើអ្នកចង់ឱ្យផែនទីមានសញ្ញាសម្គាល់បន្ថែមសញ្ញាសម្គាល់ដូចនៅក្នុងជំហានទី 4 ។
3. សម្រាប់ផែនទីទីពីរអ្នកនឹងត្រូវបន្ថែមបន្ទាត់ថ្មី 3 ទៅស្គ្រីបរបស់អ្នក ():
   var latlng2 = google.maps.LatLng ថ្មី ( កូអរដោនេទីពីរ );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = google.maps.Map ថ្មី (document.getElementById ("map_canvas_2") myOptions2);
4. ប្រសិនបើអ្នកចង់ដាក់សញ្ញាសម្គាល់នៅលើផែនទីថ្មីបន្ថែមបង្គោលទីពីរចង្អុលទៅកូអរដោនេទីពីរនិងផែនទីទី 2:
   var myMarker2 = google.maps.Marker ថ្មី ({ទីតាំង: latlng2 , ផែនទី: map2 , ចំណងជើង: " ចំណងជើងសម្គាល់របស់អ្នក "});
5. បន្ទាប់មកបន្ថែមទីពីរ

   ដែលអ្នកចង់បានផែនទីទី 2 ។ ហើយត្រូវប្រាកដថាឱ្យវាលេខសម្គាល់ = "map_canvas_2" លេខសម្គាល់។

6. នៅពេលដែលទំព័ររបស់អ្នកផ្ទុកផែនទីពីរនឹងបង្ហាញ

នេះគឺជាកូដនៃទំព័រដែលមានផែនទី Google ពីរនៅលើវា: