Markery Google

[applex 1]

Czy ktoś bawił się markerami Google na mapach?

 

Mam taki skrypt:

http://plnkr.co/edit/OIAlmAxQzzIuKtBxItLI?p=preview

 

 

Mamy w miarę prosty kod wyświetlający punkty na mapie, który ma też podawać liczby na tych punktach np. temperatura, ale kod w linku zapodaje tylko pierwszą liczbę? Ktoś zajmował się czymś takim i wie jak zakodzić skrypt aby podawał więcej wartości niż tylko pierwszy znak?

 

 

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[applex 1]

Mam ciekawy przykład, który rozwiązuje ten problem:

http://codepen.io/moistpaint/pen/ywFDe/

 

 

ale mam problem z tym, że nie wiem jak zmienić tę część:

   var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E';

Chcę podstawić tu swój własny plik graficzny,ale jak daję pliczek do podmiany na swój to kod się sypie i nic nie wyświetla

a wystarczy wstawić swój plik i powinno śmigać, a nie działa nie wiem czemu:

var image = 'http://obrazki.elektroda.pl/4283873100_1467744034.png';

Edytowano Lipiec 30, 2016 przez applex (zobacz historię edycji)

[likufanele 77]

Chcę podstawić tu swój własny plik graficzny,ale jak daję pliczek do podmiany na swój to kod się sypie i nic nie wyświetla

a wystarczy wstawić swój plik i powinno śmigać, a nie działa nie wiem czemu:

var image = 'http://obrazki.elektroda.pl/4283873100_1467744034.png';

 

U mnie działa... http://codepen.io/anon/pen/grjJJV

[applex 1]

To nie tak. Zwykła podmiana na obrazek działa, ale nie działa wtedy pokazywanie liczb na markerach bo usunąłeś kawałek funkcji, która narzuca na obrazki liczby, które zostały zdefiniowane w kodzie skryptu.

 

Także pytanie jak dodać inny obrazek niż ten generowany w SVG oraz jak nadać na nich wartości liczbowe.

[likufanele 77]

SVG pozwala na dodanie zwykłej bitmapy. Musisz więc wygenerować taki obrazek SVG gdzie będziesz miał tą bitmapę jako tło i na to dynamicznie nakładany będzie tekst. Na pewno znajdziesz wiele przykładów jak to zrobić w google.

[applex 1]

A czy nie prościej jest podstawić obrazek jaki chcę mieć i zamiast pliku SVG dodać jpg i linijkę kodu, która nakłada liczby., Moim zdaniem prościej, ale chyba nikt tego nie umie wykonać.

[likufanele 77]

Też można... Tylko musisz jakoś obudować ten jpg żeby przywiązać do niego tekst, po czym kombinować CSS-em żeby odpowiednio ustawić ten tekst nad obrazkiem - czyli generalnie to samo co możesz zrobić generując odpowiednio SVG.

Tu masz ten SVG który wkleiłeś wcześniej przepuszczony przez urldecode, może ci to coś trochę rozjaśni:

var image = 'data:image/svg xml,
	<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38">
		<path fill="#808080" stroke="#ccc" stroke-width=".5" d="M34.305 16.234c0 8.83-15.148 19.158-15.148 19.158S3.507 25.065 3.507 16.1c0-8.505 6.894-14.304 15.4-14.304 8.504 0 15.398 5.933 15.398 14.438z"/>
		<text transform="translate(19 18.5)" fill="#fff" style="font-family: Arial, sans-serif;font-weight:bold;text-align:center;" font-size="12" text-anchor="middle">'   pinz[i].lable   '</text>
	</svg>';

BTW, ten skrypt co masz w pierwszym poście działa tak jak powinien. Wg. dokumentacji:

A marker label is a single textual character that appears inside a marker. (...) only the first character of the specified string is displayed on the marker.

[applex 1]

Próbowałem to zdekodować i według koncepcji SVG dodać do kodu plik graficzny, a potem to na nowo zakodować ,ale nic mi nie wyświetla.

Coś robię źle ale nijak nie wiem jak to rozkminić.

[likufanele 77]

Daruj sobie na razie kodowanie. Na początek przygotuj sobie SVG na sucho. Możesz zacząć od tego: http://codepen.io/anon/pen/BzvzGX i od tego: http://tutorials.jenkov.com/svg/image-element.html i kombinować dalej.