Så här använder du ett nummer i stället för ett brev i Google Custom Marker

Markörer i Google Maps markerar specifika webbplatser på en karta. Som standard identifierar Google en enskild markör med en kvadrat och flera markörer med bokstäver, men det kanske inte passar vissa applikationer. Om ditt företag exempelvis hänvisar till filialer som webbplatser 1, 2 och 3, skulle numrerade markörer identifiera dem tydligare än bokstäver skulle. Använd anpassade markörer i ditt program för att designa egna etiketter för kartpositioner. Dessa markörer använder anpassade ikoner, som du kan koda med hjälp av Google Charts API.

1.

Öppna programmets källkod med ett Java-utvecklingsprogram som Eclipse.

2.

Bläddra till "initiera" -funktionen. Detta kodblock definierar din karta och definierar alternativ för den. Koden kan till exempel läsa:

funktion initiera () {

var koordinater = nya google.maps.LatLng (42.346429, -71.097186);

var myOptions = {

zoom: 4,

centrum: koordinater,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var ourHeadquarters = nya google.mapsMap (document.getElementById ("map_canvas"), myOptions);

}

3.

Lägg till en ny rad som anger bredden och längden på din markör. Till exempel, om din markör måste ange en latitud på 42.349093 och en longitud på -71.101971, lägg till följande rad:

var markörKoordinater = nya google.maps.LatLng (42.349093, -71.101971);

4.

Lägg till följande block för att skapa din markör:

var markör = ny google.maps.Marker ({

position: markörKoordinater,

karta: ourHeadquarters,

});

Ersätt "markörKoordinater" med variabeln du skapade i föregående steg och ersätt "ourHeadquarters" med variabeln som är associerad med din karta.

5.

Lägg till följande rad i markörblocket för att skapa en ikon för markören:

ikon: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=A|FF0000|000000'

6.

Byt ut "A" i raden med ett nummer. Byt ut det med "1", ändra linjen till:

ikon: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FF0000|999999'

7.

Ändra "FF0000" till HTML-hexidekimalkoden för markörens bakgrund. Om du vill ställa in bakgrundsfärgen till gul, som använder koden "FFFF00", ersätter du koden med "FFFF00", ändrar linjen till:

ikon: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|999999'

8.

Ändra "999999" till HTML-hexidekimala koden för markörnummers text. Om du till exempel skriver texten i svart, som använder koden "000000", ersätter du koden med "000000", ändrar linjen till:

ikon: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|000000'

Populära Inlägg