2016-03-21 16 views
6

Şu anda belirli bir konuma (bir koordinat enlem/boylam seti verilen) bir işaretleyici ile bir harita oluşturmak için Google Maps API kullanır. AMP HTML'de, şu anda ampül iframe uzantısı https://github.com/ampproject/amphtml/tree/master/extensions'u kullanmanın yolu görünüyor. Sorun, bir 'görünüm' haritası kullanmıyorsanız Google Haritalar embed kodunu koordinatlarla kullanamazsınız. Yer Kimliği'm yok, bu yüzden Yer kipini kullanamıyorum. 'Görüntüleme' modunu kullanamıyorum, çünkü işaretçileri yok. Ben yüksek ve düşük https://developers.google.com/maps/documentation/embed/guide#overview Ben bir işaretleyici içeren bir AMP HTML sayfasına bir Google Map eklemek için uygun yolu nedir? Forumda veya Github konularında bu konuyla ilgili herhangi bir soru görmüyorum, bu yüzden başka birinin de aynı senaryoya girip girmediğini merak ediyorum.Göm Harita

+0

Haklısınız * içindedir "Bunu yapmak için bir yol görünür Bu şu anda amp-iframe uzantısı kullanıyor *. Haritalar, "amp-iframe" ile çalışır, statik haritalar "amp-img" ve "amp-click-to-play" ile mükemmel çalışmalı ve bunları gerçekten birlikte çalışmalıdır. "Görünüm" haritasını kullanmıyorsanız, İşaretleyicileri olan Haritalar'ın henüz amp HTML'de desteklenmediğini düşünüyorum. Bunu kontrol edin [example] (https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html). – abielita

+0

Lütfen tercih ettiğiniz Haritaların yerleştirildiğini gösteren bir Gist veya JSFiddle belirtin. Buna dayanan bir çözüm bulacağız. Ayrıca bu örneği gördük: https://ampbyexample.com/components/amp-iframe/#example11 sizin örnekler – ade

+1

hem bende olmayan bir yer kimliğini gerektirir. Sadece koordinatlarım var. İşaretçileri bırakmak istiyorum. Şu anda Google Harita API'sı ile Javascript ile bunu yapmak zorunda. AMP HTML, javascript'in arka planını değiştirmek için zengin snippet'lere sahipse, bunu gerçekleştirmenin tek yolu, Google Haritalar API'sı ile koordinatların sunucu tarafındaki yer kimliğini aramaktır ve sonra PlaceID'yi kullanabilirim. Burada soru - Bu senaryoyu bir Place ID sunucu tarafına bakmadan ele almak için başka bir yol var mı. Haritalar koordinatlar ve işaretçiler yoluyla çok yaygındır. – Du3

cevap

0

Ben 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> 
+1

Bu, bir yer kimliği gerektirir. İşaretçileri içeren koordineli bir yaklaşım aramak. – Du3

2

hüner "görünümü" modunu kullanmak getirmemektir onların GitHub Repository Bu kodu bulundu, ancak daha ziyade "yer" modu. Yer modu ile bir yer kimliğine ihtiyacınız yoktur, sadece koordinatları kullanabilirsiniz. Örnek olarak: Ek bir not olarak

<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> 

, sen AMP ile bu kullanıyorsanız, size iframe sayfasında (AMP kuralı) üstüne çok yakın olması durumunda bir yer tutucu resmi eklemenizi öneririz. Bu durumda, ben şöyle bir <amp-img> kullanabilirsiniz:

<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 
    /> 

iframe içinde, aşağıdaki biçimi vardır ki:

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