Google газрын зургийг вэбсайтад хэрхэн оруулах вэ: 4 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:01

Maps Challenge -д миний төлөө саналаа өгөөрэй!

Саяхан би Google газрын зургийг ашигладаг вэбсайт үүсгэсэн. Google газрын зургийг миний вэбсайтад оруулах нь маш хялбар бөгөөд хийхэд тийм ч хэцүү биш байсан. Энэхүү гарын авлагад би Google газрын зургийг вэбсайтдаа оруулах нь хичнээн хялбар болохыг харуулах болно.

Үнэнийг хэлэхэд би зүгээр л зугаагаа гаргахын тулд Google газрын зургийг вэбсайтдаа суулгасан. Хорио цээрийн дэглэмийн үед хийх зүйл тийм ч их байдаггүй тул Google Газрын зургийг ашигладаг вэбсайт хийж, энэ вэбсайтыг бүтээх явцад миний хийсэн алхмуудыг хүмүүст үзүүлж яагаад болохгүй гэж.

Google газрын зургийг вэбсайтдаа оруулахын тулд та HTML болон CSS -ийн талаар ганц хоёр зүйлийг мэддэг байх ёстой гэж би хэлэх ёстой. Хэрэв та HTML эсвэл CSS -ийн талаар юу ч мэдэхгүй бол https://www.w3schools.com/ хаягаар орж үзээрэй.

Тэмдэглэл: Би W3Schools -тэй ямар ч хэлбэр, хэлбэрээр холбоогүй. Энэ бол зүгээр л HTML, CSS сурахад надад тустай вэбсайт юм.

Хангамж

• Текст засварлагч (таны вэбсайтыг өөрчлөх, вэбсайт дээрх агуулгыг хангахад ашиглах болно).
• Google газрын зураг (таны вэбсайтад юу оруулах вэ).
• HTML ба CSS -ийн тухай үндсэн ойлголт (эдгээр нь таны вэбсайтыг өөрчлөх, вэбсайтдаа контент өгөхөд хэрэглэгддэг дараах програмчлалын хэлүүд юм).

Алхам 1: Вэбсайт дээрээ контент оруулах

Компьютер дээрээ текст засварлагч програм руу очно уу. Жишээлбэл, би Windows -тэй болохоор Notepad руу орох ёстой. Notepad руу орсны дараа дараахь зүйлийг бичнэ үү.

Гүүгл газрын зураг

Гүүгл газрын зураг

Тэмдэглэлийн дэвтэрт дараахь зүйлийг бичиж дууссаны дараа Google газрын зураг руу очоод дараа нь Google газрын зургийг вэбсайтдаа оруулах кодоо авах болно.

Google газрын зураг руу орох линк энд байна:

Алхам 2: Google газрын зургийг вэбсайт дээрээ суулгаарай

Google Газрын зураг дээр орсны дараа "Цэс" товчийг дараад "Газрын зургийг хуваалцах эсвэл оруулах" хэсгийг олоорой. "Газрын зургийг хуваалцах эсвэл оруулах" -ыг хармагц дээр нь дарна уу. Үүнийг товшсоны дараа та "Холбоос илгээх", "Газрын зураг оруулах" гэсэн зүйлийг харах ёстой. "Газрын зураг оруулах" дээр дарна уу, "Газрын зураг оруулах" дээр дарсны дараа та текстийн зүүн талд байгаа сумыг харах ёстой бөгөөд үүнийг том эсвэл жижиг болгохыг хүсч буй газрын зургийг сонгох хэрэгтэй. Текстийг хайрцагт хуулж бичнэ үү. Мөн текстээ вэбсайтынхаа HTML дээр буулгаарай.

Алхам 3: Вэбсайтаа тохируулах

Компьютер дээрх текст засварлагч програм руу буцаж очоод дараах зүйлийг бичнэ үү.

Google газрын зургийн үндсэн хэсэг {background-color: rgb (129, 207, 224, 1);}

Гүүгл газрын зураг

Загварын тэмдэглэгээг вэбсайтаа тохируулахад ашигладаг. Одоо энэ алхам нь CSS -ийг ашигладаг болохыг танд хэлэх болно. Та миний вэбсайт шиг харагдахын тулд дараах зүйлийг бичиж болно.

Дууссаны дараа "Google Maps.html" хэлбэрээр файлаа хадгална уу. Html хэсгийг бүү мартаарай, учир нь хэрэв та энэ хэсгийг оруулахгүй бол вэбсайт хийх боломжгүй болно.

Алхам 4: Эцсийн бүтээгдэхүүнээ хараарай

Энэхүү зааварчилгааны бүх алхмуудыг дагаж дууссаны дараа эцсийн бүтээгдэхүүнээ нэг сайн хараарай. Хэрэв та эцсийн бүтээгдэхүүндээ сэтгэл хангалуун байгаа бол энэ нь гайхалтай юм. Гэхдээ хэрэв та эцсийн бүтээгдэхүүндээ сэтгэл хангалуун бус байгаа бол Notepad руугаа ороод эцсийн бүтээгдэхүүнээ засахыг хичээгээрэй, ингэснээр дараагийн удаа эцсийн бүтээгдэхүүнээ нэг сайн харахдаа бүтээсэн зүйлдээ сэтгэл хангалуун байх болно. чиний гар.

Хэрэв та миний эх кодыг харахыг хүсвэл энэ зааврын доороос олж болно. Миний зааварчилгаа болон аз жаргалтай кодчилолыг үзэж байгаад баярлалаа!

Сануулахад, Maps Challenge -д надад саналаа өгөөрэй!