Основен » амазонка » Google Maps-də xəritələri necə vektorlaşdırmaq və ya vektorlardan istifadə etmək olar - Çox asandır metod

Google Maps-də xəritələri necə vektorlaşdırmaq və ya vektorlardan istifadə etmək olar - Çox asandır metod

AliExpress WW

Google Maps olaraq bilinən, adı aktivləşdirilən şirkət tərəfindən istehsal olunan tətbiq. Bu istifadə və ya yaradılmışdır vektorlar və kodlar JavaScript API. Bu səbəbdən bu tətbiqdə yerləşən xəritələr məntiqin tələb etdiyi kimi mütləq statik deyildir..

Bəzən bu xəritələri əlavə məlumat göstərmək üçün genişləndirməyə ehtiyac tapacağıq. Bunu etmək üçün yalnız nöqtələr tərəfindən yaradılan formalı vektorlardan istifadə edəcəyik. Və bu münasibətlə bir nümunə olaraq, Onlardan xüsusi əlfəcinlər əlavə etmək üçün istifadə edəcəyik xəritəmizdə.

Bu yazıda sizə Google Maps Javascript API-də mövcud olan müəyyən vektorlardan istifadə etmək üçün mövcud yolları göstərəcəyik. Öz növbəsində, bütün proses heç bir narahatlıq olmadan PC-dən edilə bilər. Bu mövzu ilə maraqlanırsınızsa, oxumağa davam etməyinizi məsləhət görürük Google Xəritələrdə vektorlardan istifadə etməyi öyrənin.

Ümumiyyətlə xəritələr yaradılır API-dən Javascript Google Maps hər zaman statik olmayacaq. Buna görə zaman zaman əlavə məlumatları göstərmək üçün bu xəritələrin əhatə dairəsini genişləndirməliyik..

Belə məlumatlar var vektorlar sayəsində daxil edilmişdir, nöqtələrdən təşkil olunmuş formalara uyğun olan. Öz növbəsində, API tərəfindən istifadə olunan vektorların əksəriyyəti üst-üstə qoyma adlanır. Google Xəritələrə daxil ola bilmək üçün hesabınızı açıq vəziyyətdə brauzerinizdən axtarmalısınız.

Google Maps-də xəritələri necə vektorlaşdırmaq olar
Bu videoya YouTube'da baxın

İndeks ()

    Google Xəritələrindəki vektorlardan istifadə edərək xəritəyə bir marker əlavə edin

    Üçün xəritəmizə marker əlavə edə bilmək, əvvəlcə xəritəni göstərmək üçün üslubları ilə birlikdə API daxil etməliyik. Bunun üçün Google geliştirici etimadnaməmizi istifadə etməliyik. Yəni bizdə yoxdursa, bu proseduru həyata keçirə bilməyəcəyik..

    Bir az aşağı olsa da sizə biraz API verəcəyik tək istifadə edə biləcəyiniz üçün, prosesi uğurla başa çatdırmaq üçün bir addım belə atlamadan özünüzə rəhbərlik etməyiniz kifayətdir.

    Sonra hansının olacağını müəyyənləşdirməliyik bizim dəyişənlər qlobal. Bu dəyişənlərdən biri xəritə adlandırılmalıdır. Digərləri isə ehtiyac duyduğumuz koordinatlara uyğun olaraq markerlər yaratmaq üçün istifadə ediləcək.

    Davam etmək üçün xəritəmizin başlanğıc funksiyasını təyin etməliyik. Bu başlatma funksiyası ehtiva edəcəkdir xəritə üçün baza növü kimi seçimlər, zoom və eyni koordinatlar. Eyni şəkildə xəritənin DOM E başlanğıc ustaları tərəfindən div kimliyini əldə etməyə çalışacağıq.

    Eyni şəkildə quracağıq bir əmr funksiyası eventsMarker (). Hansı ki, ehtiyac duyduğumuz markerlərin təyin edilməsindən məsul funksiyaları çağıracaq hadisələri təyin edəcəyik. Ancaq bu funksiyaları qurmadan əvvəl müəyyən xüsusiyyətləri müəyyənləşdirməliyik.

    Xəritəmizin koordinatlarında yaradılacaq təsadüfi dəyərləri təyin etməli olacağıq. Bunlar Google Maps JavaScript API vasitəsilə şərh edilə bilməsi üçün. Biz belə bir tədbir görəcəyik, hesab əməliyyatlarının tətbiqi qlobal koordinatlar və onların dəyişənləri haqqında.

    Son mərhələlərə getmədən əvvəl Google Xəritədə trafiği necə görə biləcəyinizi bilmək çox vacibdir, şübhəsiz ki, bilirsiniz bu sizə bir çox narahatlıqdan xilas olacaq Bunun xaricində tıxac olduğu zaman oraya daha sürətli getməyinizə kömək edəcək, çünki ən sürətli marşrutu göstərəcəkdir.

    Bitirmək üçün Xəritədə İşarələr Qoyduq

    Bunu tamamladıqdan sonra quracağıq üçün funksiyalar xəritədə işarələr qoyun üzərində işləyirik. Bu şəkildə bir marker istehsalından məsul olacaq Marker metodundan istifadə edəcəyik. Əvvəlcədən proqramlaşdırılmış funksiyaya əlavə olaraq, qeyd olunan işarələrin göstərildiyi yerdəki koordinatları yaradacağıq.

    Prosedurun bu hissəsində xüsusi əlfəcinlərimizi əlavə etməyimizi nəzərə almalıyıq. Onların nişanları qovluq düzümündə olmalıdır layihəmizin. Bu, bu nişanları xəritəyə əlavə edərkən heç bir problem olmaması üçün.

    İstifadə edəcəyimiz nişanların layihəmizin qovluğunda olduğundan əmin olduqdan sonra. Bir funksiya qurmağın vaxtı gəldi, Bundan əvvəl istifadə ediləcək elementlərin identifikasiya adlarını ehtiva edən bir sıra yaratmaqla başlayacağıq.

    Müəyyən etdiyimiz ikonları təsadüfi bir şəkildə düzəltməliyik. Verilir Marker metoduna əlavə parametr ilə çalışdığımız, ikon adlanacaq. İndi kodumuza xəritəyə başlayacaq bir element əlavə edəcəyik.

    Google Maps-də javascript API istifadə edərək xəritəyə işarələr əlavə etmək

    API ilə yaradılan xəritələr ümumiyyətlə göstərmək üçün istifadə olunur bir şirkətin dəqiq yeri veb portalda. Ümumiyyətlə, bunu müəyyən bir vektorla təmsil oluna bilən maraq nöqtəsi adlandırırıq.

    Bu məlumdur API dilində "əlfəcin " olaraq Google Maps JavaScript. Bu məşhur markerləri fərdi xəritənizə necə əlavə edəcəyinizi öyrənmək üçün oxumağa davam etməyə dəvət edirik.

    Bu göstəricilərlə başlamazdan əvvəl, bütün funksiyaların tam siyahısını biləcəyiniz bir təlimat tövsiyə etmək istəyirik, Google Maps kommunal, xüsusiyyətləri və fəndləri, buna görə daha yaxşı bir şəkildə necə idarə edəcəyinizi bilə bilərsiniz.

    Xəritəyə Xüsusi Nişan əlavə etmək üçün təlimat

    • Xüsusi xəritəmizə baxmaq üçün əvvəlcə API daxil etməlisiniz. Bu addımda vacibdir google geliştirici etimadnaməsini istifadə edin aşağıdakı nümunənin düzgün işləməsi üçün:
    html {boy: 100%} gövdə {boy: 100%; margin: 5; } #mapaDiv {en: 800px; hündürlük: 500px; }

    • İndi etməliyik qlobal dəyişənləri təyin edin, onlardan biri "map " adlanmalı və təsadüfi markerlər yaratmaq üçün istifadə ediləcək bir sıra dəyişənlər olmalıdır.
    • Bütün bunlara münasibətdə istənilən ərazi ilə həmsərhəd olan koordinatları bu vəziyyətdə Madrid olacaq. Bunu etmək üçün aşağıdakı funksiyanı daxil edin:
    var xəritəsi; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1;
    • Sonra etməliyik xəritəmizin başlatma funksiyasını təyin edin, Bura yaxınlaşdırma üçün əsas seçimlər, xəritəmizin baza növü və bu dəfə Madrid şəhərinin olacağı mərkəzi koordinatlar daxil olacaq..
    • Bunun üçün DOM tərəfindən div kimliyini almalıyıq, sonra xəritəyə başlayırıq və xəritədə işarələr qoyarkən baş verən hadisələri idarə etmək üçün bir funksiya təyin etməyə başlayırıq. Daha sonra girməli olduğunuz kodu göstərəcəyik:
    function initializeMap () {google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap '); map = new google.maps.Map (mapElement, mapOptions); eventsMarker (); }
    • Sonra toxunun "BookmarkEvents " funksiyasını hazırlamaq. Tərifində, 2 fərqli əlaqədən basılan şəxsiyyətə görə bir kliklə bağlanmış 2 hadisə olmalıdır. Öz növbəsində, bu keçidlər aşağıdakı markerlərin təyin edilməsindən məsul olacaq iki əlavə funksiyanı çağırmalıdır:
    functionMarkerEvents () {document.getElementById ('add_Marker '). addEventListener ('click ', function () {addMarker ();}); document.getElementById ('add_person_Barker '). addEventListener ('click ', function () {addPersonMarker ();}); }

    • Google Maps-də vektorlardan istifadə prosesi izahını demək olar ki başa çatdırmışıq, az şey qalıb. Sonra,Bu addımda, yaratmadan əvvəl markerləri təyin edəcək funksiyalar aşağıdakıları nəzərə almalısınız.
    • Əvvəlcə lazımdır koordinatlar üzərində işləmək bu baxımdan bizə təsadüfi olaraq dəyərlər təqdim etsinlər.
    • Öz növbəsində, bu koordinatlar şərh olunmalıdır Google Maps Javascript API tərəfindən. Bu prosesi müəyyən koordinatların qlobal dəyişənləri üzərində əməliyyatlarla həyata keçirəcəyik, bunun üçün aşağıdakı funksiyanı daxil edirik:
    function createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.random (); var newLat = minLat + rndNumLat * deltaLat; var rndNumLng = Math.random (); var newLng = minLng + rndNumLng * deltaLng; yeni google.maps.LatLng (newLat, newLng) qayıt; }
    • Sonra markerləri müvafiq xəritəyə bağlamaq üçün öz funksiyalarınızı inkişaf etdirməyə davam edə bilərsiniz. Bunu etmək Marker metodundan istifadə etməlisiniz adi bir marker yaratmaq üçün və yuxarıda adlanan funksiya ilə xəritənin göstəriləcəyi təsadüfi bir koordinat yarada bilərsiniz..
    funksiya addMarker () {var coordinate = createLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, title: 'Random Marker - ' + markerId}); markerId ++; }
    • Sonra istədiyiniz bütün nişanlara sahib olduqda, funksiyanı hazırlamalısınız. Bunu etmək üçün lazımdır nişanların adları ilə bir sıra yaradın və təsadüfi şəkildə işləməyə davam edin, bunun üçün Marker metoduna bir parametr əlavə etməlisiniz.
    function addPersonMarker () {var markerIcons = ['comics ', 'videogames ', 'computer ', 'hotfood ', 'bike_rising ']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var coordinate = createLaLgRandom (); var marker = new google.maps.Marker ({mövqe: koordinat, xəritə: xəritə, ikon: 'img / ' + markerIcons [rndMarkerId] + '. png ', title: 'Random Marker - ' + markerId}); markerId ++; }

    • Google Xəritədə vektorların necə istifadə ediləcəyi müddətini yekunlaşdırmaq üçün, aşağıdakıları etməliyik. Sadəcə xəritəyə başlamaq üçün hadisəni əlavə etməliyik və sonra divimizdən əvvəl aşağıdakı funksiyaları çağıracaq hadisələr üçün müəyyənləşdirdiyimiz kimliklərlə iki əlaqə yaratmağa davam edirik

    google.maps.event.addDomListener (pəncərə, 'yükləmə', initializeMap);

    google.maps.event.addDomListener (pəncərə, 'yükləmə', initializeMap); Əlfəcinlər əlavə edin
    Əlavə et | Xüsusi Əlfəcin əlavə edin

    İndiyə qədər xəritəmiz hazır olmalıdır həm standart markerləri, həm də bizimki əlavə edin xüsusi. Beləliklə, yalnız istədiyimizi seçməliyik. Bunu xəritədəki təsadüfi nöqtələrə istədiyimiz qədər marker əlavə edərək test edə bilərik.

    Nəhayət, sizə təqdim etdiyimiz məlumatlarla siz artıq ən sadə yolu öyrəndiniz içərisində vektorlardan istifadə edin Google xəritələr.

    Bitirmədən əvvəl, çox güman ki, Google Xəritədə koordinatları sadə bir şəkildə necə yerləşdirə biləcəyiniz barədə şübhəniz var idi, əslində bu o qədər də çətin olmayan bir şeydir beləliklə özünüzü kifayət qədər spesifik bir təlimat vasitəsilə yönləndirə bilərsiniz.

    AliExpress WW
    Препоръчано
    Оставете Коментар