Radiaalkauguse Google Mapsi API kasutamine

Sisu

• Samm 1
• 2. samm
• 3. samm
• 4. samm
• 5. samm
• 6. samm
• 7. samm

Google Maps 3.0 API abil saate oma Google'i kaarti kohandada oma veebisaidi vaatajaskonna konkreetsetele vajadustele vastavaks. Üks isikupärastamise meetod on sisestada ring, mis näitab kauguse raadiust kindla koha ümber. Võite näiteks näidata viie kilomeetri raadiust ümber turismipunkti, et külastajad saaksid näha lähedal asuvaid hotelle ja restorane. Asukoha või punkti ümber kaugusraadiuse loomiseks kasutage Google Mapsi klassi „Ring”.

Samm 1

Avage HTML-fail ja minge jaotisesse, mis sisaldab Google'i kaardikoodi.

2. samm

Kerige koodi allapoole, kuni leiate koodi, mis määrab markeri asukoha. Järjehoidja hõlpsaks leidmiseks otsige HTML-failist terminit "google.maps.Marker".

3. samm

Looge markeri määratlemise all kiht "Ring" ja kinnitage see sellele. Näiteks tippige:

var circleExample = new google.maps.Circle ({kaart: kaart

4. samm

Lisage markeri ümber oleva ringi raadius meetrites:

var circleExample = uus google.maps.Circle ({kaart: kaardi raadius: 5000

5. samm

Looge ringi täitevärv. Värvi määrate kuueteistkümnendsüsteemis. Näiteks tippige:

var circleExample = uus google.maps.Circle ({kaart: kaardi raadius: 5000 fillColor = #FFFFFF});

6. samm

Seostage või lisage ring markerile:

var circleExample = uus google.maps.Circle ({kaart: kaardi raadius: 5000 fillColor = #FFFFFF}); ringExample.bindTo (’kaart’, marker);

7. samm

Salvestage kaart ja testige. Google Maps näitab valget ringi, mille raadius on 5000 meetrit ümber markeri asukoha.