Osadzanie mapy za pomocą znacznika na stronie HTML AMP

Obecnie używam interfejsu API Map Google do generowania mapy z znacznikiem (z podaniem długiego/długiego zestawu współrzędnych) do danej lokalizacji. W AMP HTML wygląda na to, że obecnie jest to możliwe za pomocą rozszerzenia amp-iframe https://github.com/ampproject/amphtml/tree/master/extensions. Problem polega na tym, że nie możesz używać kodu do umieszczenia Google Maps ze współrzędnymi, chyba że używasz mapy "widoku". Nie mam identyfikatora miejsca, więc nie mogę użyć trybu miejsca. Nie mogę używać trybu "Widok", ponieważ nie ma on znaczników. Wyglądałem wysoko i nisko pod numerem https://developers.google.com/maps/documentation/embed/guide#overview Osadzanie mapy za pomocą znacznika na stronie HTML AMP

Jaki jest właściwy sposób dołączania Mapy Google na stronie HTML AMP, na której umieszczony jest znacznik? Nie widzę żadnych aktualnych pytań na ten temat na forum lub w sprawach Github, więc jestem ciekawy, czy ktoś inny wpadł na ten sam scenariusz.

Źródło

2016-03-21 Du3

Jesteś tuż * "wydaje się, że droga do zrobienia obecnie używa rozszerzenia amp-iframe "*. Mapy działają z 'amp-iframe', mapy statyczne powinny współpracować z' amp-img' i 'amp-click-to-play' powinny sprawić, by naprawdę dobrze ze sobą współpracowały. Myślę, że Mapy ze znacznikami nie są jeszcze obsługiwane w Amp HTML, chyba że korzystasz z mapy "widoku". Sprawdź ten [przykład] (https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html). – abielita

Proszę podać Gist lub JSFiddle pokazujące preferowane mapy Mapy. Na tej podstawie opracujemy rozwiązanie. Również widziałeś ten przykład: https://ampbyexample.com/components/amp-iframe/#example11 – ade

oba Twoje przykłady wymagają identyfikatora miejsca, którego nie mam. Mam tylko współrzędne. Chcę upuścić markery. Obecnie musisz to zrobić za pomocą Javascript z interfejsem API Map Google. Jeśli AMP HTML ma mieć fragmenty rozszerzone, które zastąpią javascript zza kulis, wydaje się, że jedynym sposobem na osiągnięcie tego jest wyszukiwanie ID miejsca od strony serwera współrzędnych za pomocą interfejsu API Map Google, a następnie mogę użyć PlaceID. Pytanie tutaj - czy istnieje inny sposób radzenia sobie z tym scenariuszem bez szukania strony serwera identyfikatora miejsca. Mapy za pomocą współrzędnych i znaczników są bardzo powszechne. – Du3

znalazłem ten kod na swojej GitHub repozytorium https://github.com/ampproject/amp-by-example/blob/master/src/20_Components/amp-iframe.html#L62-L72

<amp-iframe width="600" height="400" 
          layout="responsive" 
          sandbox="allow-scripts allow-same-origin allow-popups" 
          frameborder="0" 
          src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848"> 
    </amp-iframe>

Źródło

2016-03-27 00:51:51

Wymaga to identyfikatora miejsca. Poszukuje skoordynowanego podejścia, które obejmuje markery. – Du3

Sztuką jest, aby nie korzystać z trybu „Widok”, ale raczej tryb „miejsce”. W trybie miejsca nie potrzebujesz identyfikatora miejsca, możesz po prostu użyć współrzędnych. Jako przykład:

<amp-iframe 
    width="600" 
    height="400" 
    layout="responsive" 
    sandbox="allow-scripts allow-same-origin allow-popups" 
    frameborder="0" 
    src="https://www.google.com/maps/embed/v1/place?key=<key>&q="44.0,122.0"> 
</amp-iframe>

jako dodatkowej, jeśli używasz tego z AMP, polecam to obraz zastępczy w przypadku iframe jest zbyt blisko górnej części strony (reguła AMP). W tym przypadku, mogę użyć <amp-img>, tak:

<amp-img 
    src="https://maps.googleapis.com/maps/api/staticmap?key=<key>&center="44.0,122.0"&zoom="15"&size=600x400" 
    width="600" 
    height="400" 
    layout="responsive" 
    placeholder 
    />

w iframe, tak że ma następujący format:

<amp-iframe ... > 
    <amp-img .../> 
</amp-iframe>

Źródło

2017-02-05 22:34:43

Osadzanie mapy za pomocą znacznika na stronie HTML AMP

Odpowiedz

Powiązane problemy