Апп-даа газрын зураг хэрхэн нэмэх: суулгац, харилцах зураг, дэлгүүрийн байршил

Аппдаа газрын зураг нэмэхийн тулд эхлээд танд статик суулгац (нэг байршил тэмдэгтэй, жишээ нь «дэлгүүрээ олох») эсвэл харилцах зураг (өгөгдлөөсээ олон тэмдэг, шүүлтүүр, бүлэглэл, «миний ойр») хэрэгтэй эсэхийг шийд. Ганц байршилд суулцсан газрын зураг хамгийн хурдан бөгөөд Google-ийн Maps Embed API-аар үнэгүй. Харилцах зургийн хувьд JavaScript газрын зургийн сан ашигла — Google Maps JavaScript API, Mapbox GL JS эсвэл нээлттэй эхийн Leaflet tile нийлүүлэгчтэй — мөн байршил бүрийн өргөрөг, уртрагыг өгөгдлийн санд хадгалж, API түлхүүрээ өөрийн домэйнд хязгаарла. Нийлүүлэгч бүрийн дэлгэрэнгүй мэдээлэл доор 2026 оны 9-р сарын байдлаар тэдний баримт бичгээс авсан.

Танд ямар газрын зураг хэрэгтэй вэ

Ихэнх жижиг бизнесийн сайтад эхний мөр л хэрэгтэй. Лавлах, зах зээл, жагсаалтын сайтууд гурав, дөрөв дэх мөрийг хэрэгтэй болгодог.

Таны сонголтууд

Google Maps Platform

Google-ийн эхлүүлэх гарын авлагад төлбөр идэвхжсэн Cloud төсөл үүсгэж, хэрэгтэй API-уудаа идэвхжүүлэх ёстой гэж заасан. Хэрэглэсэн тоогоор төлдөг үнэ нь Dynamic Maps-ийг оруулаад Essentials SKU-д сард 10,000 үнэгүй үйл явдлын хязгаар өгдөг, мөн Dynamic Maps-ийг тэр дээр нь (эхний эзлэхүүний түвшинд) 1,000 үйл явдалд $7.00 гэж жагсаасан. Maps Embed SKU нь хязгааргүй, үнэгүй гэж жагсаасан. Google сар бүрийн захиалгат төлөвлөгөөг мөн зардаг. Одоогийн тоонуудыг Google Maps Platform-ийн үнэ-ээс шалгана уу.

Mapbox

Mapbox-ийн үнийн хуудсанд вэбт Mapbox GL JS-д сард 50,000 үнэгүй газрын зургийн ачаалал, дараа нь 1,000 ачаалалд $5.00 гэж заасан. Mapbox-ийн үнэ-г үзнэ үү.

Leaflet ба OpenStreetMap

Leaflet өөрийгөө гар утсанд тохиромжтой харилцах газрын зургийн нээлттэй эхийн JavaScript сан, ойролцоогоор 42 KB гэж тодорхойлдог. Энд газрын зургийн tile (зургийн хэсгүүд) хаанаас ирэх шаардлагатай. OpenStreetMap-ийн нийтийн tile сервер уруу татдаг боловч tile ашиглалтын бодлого нь харагдах эх сурвалжийн тэмдэглэл шаарддаг, их хэмжээний татахыг хориглодог, үйлчилгээний баталгаагүй, арилжааны үйлчилгээнд хандалт цуцлагдаж болзошгүйг анхааруулдаг. Бодит бүтээгдэхүүнд Leaflet-тэй ажилладаг арилжааны эсвэл өөрөө хостинглосон tile эх сурвалж ашигла.

API түлхүүрүүд: нийтийн, гэхдээ хязгаарлагдсан

Хөтөчид ашигладаг газрын зургийн түлхүүрийг таны хуудсыг нээсэн хэн ч харж болно. Энэ хэвийн, гэхдээ хэн нэгэн түлхүүрийг хуулж, таны нэхэмжлэх дээр ашиглалт гаргаж болно гэсэн үг. Google-ийн аюулгүй байдлын заавар бол таны домэйнуудыг жагсаасан вэбсайтын (HTTP referrer) хязгаарлалт нэмэх, мөн түлхүүр зөвхөн ашигладаг API-д ажилладаг байхаар API-ийн хязгаарлалт тавих явдал.

Та серверийн үйлчилгээний түлхүүрүүд — жишээ нь олон мянган хаягийг геокодинг хийх — тусдаа байж, серверийн нууц утгад хадгалагдах ёстой, хуудсанд биш. Мөн нийлүүлэгчийн консолд төсвийн анхааруулга эсвэл квот тавьж, алдаа том нэхэмжлэх болохгүйг хангаарай.

Геокодинг: хаягийг нэг удаа координатад хөрвүүл

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

1. Жагсаалтыг хадгалах үед түүний хаягийг серверт геокодингээр тооцоол.
2. Өргөрөг, уртрагыг өгөгдлийн санд хадгал.
3. Газрын зураг хадгалсан координатыг уншина; хуудас үзэх бүрт геокодинг хийдэггүй.

Геокодингийн үр дүнг хэр удаан хадгалж болохыг нийлүүлэгч бүрийн нөхцлөөс шалгаарай; тэд өөр өөр.

Жишээ prompt-ууд

Ганц суулгасан газрын зураг:

Холбоо барих хуудсанд манай хаягийг (12 High Street, Leeds) харуулсан Google газрын зураг нэм. Maps Embed API-г ашиглаж, түлхүүрийг GOOGLE_MAPS_EMBED_KEY-д хий. Доор «Чиглэл авах» линк нэм. Утсан дээр бүтэн өргөнтэй болгож, удаан ачаалдаг (lazy-load) байг.

Жагсаалтын харилцах зураг:

Listings хүснэгтэд өргөрөг, уртраг нэм. Жагсаалт үүсгэх эсвэл хаяг өөрчлөгдөхөд түүнийг серверт GEOCODING_API_KEY-ийн түлхүүрээр геокодинглож, координатыг хадгал. Browse хуудсанд Leaflet ашиглаж жагсаалт бүрт нэг тэмдэгтэй газрын зураг харуул, тэмдэгүүд давхцахад бүлэглэлттэй. Тэмдэг дээр дарахад гарчиг, үнэ, линк харагдана. Газрын зураг болон жагсаалт ижил шүүлтүүрийг ашигладаг байг.

«Миний ойр»:

«Миний ойр» товч нэм, энэ нь зочноос байршлаа асууж, 10 км дотрох жагсаалтуудыг зайгаар эрэмбэлэн харуулна. Хэрэв тэд байршлын зөвшөөрлөөс татгалзвал оронд нь хот бичих боломж өг.

Алхам алхмаар

1. Дээрх хүснэгтээс газрын зургийн төрлөө сонго.
2. Нийлүүлэгчийн данс болон төсөл үүсгэж, хэрэгтэй API-уудаа л идэвхжүүл.
3. Түлхүүр үүсгэ: домэйнд хязгаарласан хөтчийн түлхүүр (бүтээж буй үедээ урьдчилан харах домэйныг оруулаад) ба шаардлагатай бол геокодингийн серверийн түлхүүр.
4. Түлхүүрүүдийг нууц утга болгон хадгалаад бүтээгчдээ тэдгээрийг ашиглахыг хүс; хөтчийн түлхүүр хуудсанд орсон ч хязгаарлагдсан хэвээр байна.
5. Өгөгдлийн санд байршил бүрийн координатыг хадгал.
6. Газрын зургаа бүтээ: тэмдэг, popup, бүлэглэлт, тохиромжтой анхдагч zoom.
7. Жагсаалттай хослуул. Зөвхөн газрын зураг утсан дээр болон дэлгэцийн уншигчид хэрэглэхэд хэцүү. Ижил үр дүнгээ жагсаалтаар харуул.
8. Нийлүүлэгчийн консолд төсвийн анхааруулга тавь.
9. Нийтэлж, амьд домэйн дээр туршаарай, учир нь хөтчийн referrer хязгаарлалт ихэвчлэн амьд домэйныг нэмэх хүртэл газрын зургийг блоклодог.

Түгээмэл алдаанууд

• Хязгаарлагдаагүй түлхүүрүүд. Хэн ч өөрийн сайтад дахин ашиглаж болно.
• Хуудас үзэх бүрт геокодинг хийх. Удаан, үнэтэй; хадгалах үед нэг удаа геокодинг хий.
• Түлхүүрийн хязгаарлалтад амьд домэйныг мартах. Урьдчилан харах дээр ажиллаад, продакшн дээр хоосон саарал хайрцаг болдог.
• Зөвхөн газрын зурагтай бүдүүвч. Жагсаалтгүй тэмдэгүүд жижиг дэлгэцэнд хэцүү, хүртээмжгүй.
• Бүлэглэлтгүйгээр хэдэн зуун тэмдэг. Уншихад хэцүү, удаан.
• Эх сурвалжийн тэмдэглэл дутуу. Ихэнх газрын зургийн болон tile нийлүүлэгчид шаарддаг, түүнийг нуувал тэдний нөхцөлийг зөрчих болно.
• Хуудас ачаалах үед байршил асуух. Зөвхөн хэрэглэгч «Миний ойр» дарахад асуу.

Шалгах жагсаалт

• Ажилд тохирох газрын зургийн төрөл сонгосон
• Хөтчийн түлхүүр таны домэйн болон шаардлагатай API-д хязгаарлагдсан
• Серверийн түлхүүрүүд нууц утгад байгаа
• Координатууд өгөгдлийн санд, нэг удаа геокодингдсэн
• Үр дүн жагсаалтаар мөн харуулагдсан
• Олон тэмдэгт бүлэглэлт
• Эх сурвалжийн тэмдэглэл харагдаж байна
• Нийлүүлэгчтэй төсвийн анхааруулга тохирсон
• Нийтэлсэн домэйн болон утсан дээр туршсан

Mythex дээр газрын зураг нэмэх

Mythex-д суурилуулсан газрын зургийн интеграци байдаггүй; та өөрийн нийлүүлэгчийн түлхүүрийг авчирч, төслийн нууц утга болгон нэмнэ (эсвэл агент нууц утгын карт харуулахад буулгана), мөн ямар ч API-г холбох-д дурдсаны дагуу чатаар газрын зургийг хүс. Координатууд төслийн өгөгдлийн сан-д орно. Түлхүүрийн вэбсайтын хязгаарлалтад урьдчилан харах болон нийтэлсэн домэйн хоёуланг нь нэмэхээ мартуузай, мөн нууц утгаа өөрчилсний дараа дахин нийтэл.

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

Асуултууд