2016-03-21 8 views
6

वर्तमान में मैं किसी दिए गए स्थान पर मार्कर के साथ नक्शा उत्पन्न करने के लिए Google मानचित्र API का उपयोग करता हूं (निर्देशांक के अक्षांश/लंबे सेट को दिए गए)। एएमपी एचटीएमएल में, ऐसा लगता है कि वर्तमान में यह amp-iframe एक्सटेंशन https://github.com/ampproject/amphtml/tree/master/extensions का उपयोग कर रहा है। मुद्दा यह है कि आप निर्देशांक के साथ Google मानचित्र एम्बेड कोड का उपयोग नहीं कर सकते हैं जब तक आप 'व्यू' मानचित्र का उपयोग नहीं कर रहे हों। मेरे पास प्लेस आईडी नहीं है, इसलिए मैं प्लेस मोड का उपयोग नहीं कर सकता। मैं 'व्यू' मोड का उपयोग नहीं कर सकता, क्योंकि इसमें कोई मार्कर नहीं है। मैंने देखा है https://developers.google.com/maps/documentation/embed/guide#overviewएएमपी एचटीएमएल पेज पर मार्कर के साथ एम्बेड करें मानचित्र

एएमपी एचटीएमएल पेज पर Google मानचित्र को शामिल करने का उचित तरीका क्या है जिस पर मार्कर रखा गया है? मुझे फोरम या गिथब मुद्दों पर इस बारे में कोई मौजूदा प्रश्न नहीं दिख रहा है, इसलिए अगर मैं किसी और परिदृश्य में भाग गया हूं तो मुझे उत्सुकता है।

+0

आप सही * में हैं "यह जिस तरह से करने के लिए प्रकट होता है यह वर्तमान में amp-iframe एक्सटेंशन का उपयोग कर रहा है "*। मानचित्र 'amp-iframe' के साथ काम करते हैं, स्थिर मानचित्रों को' amp-img' और 'amp-click-to-play' के साथ बहुत अच्छा काम करना चाहिए, उन्हें वास्तव में अच्छी तरह से मिलकर काम करना चाहिए। मुझे लगता है कि मार्करों के साथ मानचित्र अभी तक एएमपी एचटीएमएल में समर्थित नहीं हैं जबतक कि आप 'व्यू' मानचित्र का उपयोग नहीं कर रहे हैं। इसे जांचें [उदाहरण] (https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html)। – abielita

+0

कृपया एक गिस्ट या जेएसफ़ीडल प्रदान करें जो आपके पसंदीदा मानचित्र एम्बेड को दिखाता है। हम उस पर आधारित एक समाधान का पता लगाएंगे। आपने यह उदाहरण भी देखा है: https://ampbyexample.com/components/amp-iframe/#example11 – ade

+1

आपके दोनों उदाहरणों में एक स्थान आईडी की आवश्यकता है, जो मेरे पास नहीं है। मेरे पास केवल निर्देशांक हैं। मैं मार्कर छोड़ना चाहता हूं। वर्तमान में आपको इसे Google मानचित्र API के साथ जावास्क्रिप्ट के साथ करना है। यदि एएमपी एचटीएमएल दृश्यों जावास्क्रिप्ट के पीछे प्रतिस्थापित करने के लिए समृद्ध स्निपेट्स है, तो ऐसा लगता है कि यह पूरा करने का एकमात्र तरीका है Google आईडी एपीआई के साथ सर्वर पक्ष को समन्वयित करने से स्थान आईडी को देखकर, और फिर मैं प्लेस आईडी का उपयोग कर सकता हूं। यहां सवाल - क्या प्लेस आईडी सर्वर की तरफ देखे बिना इस परिदृश्य को संभालने का कोई और तरीका है। निर्देशांक और मार्कर के माध्यम से मानचित्र बहुत आम हैं। – Du3

उत्तर

0

मैं उनके GitHub भंडार पर इस कोड को पाया 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

इसके लिए एक जगह आईडी की आवश्यकता है। समेकित आधारित दृष्टिकोण की तलाश में जिसमें मार्कर शामिल हैं। – Du3

2

चाल "देखें" मोड का उपयोग नहीं करने के लिए है, बल्कि "जगह" मोड। जगह मोड के साथ, आपको किसी स्थान आईडी की आवश्यकता नहीं है, आप बस निर्देशांक का उपयोग कर सकते हैं। एक उदाहरण के रूप:

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

एक अतिरिक्त नोट के रूप में, यदि आप एएमपी के साथ इस प्रयोग कर रहे हैं, मैं तुम्हें एक प्लेसहोल्डर छवि मामले में आइफ्रेम भी पेज (एक एएमपी नियम) के शीर्ष के करीब है शामिल सलाह देते हैं। iframe के भीतर

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

, इतना है कि यह निम्न स्वरूप है: उस मामले में, मैं बहुत की तरह एक <amp-img> उपयोग कर सकते हैं,

<amp-iframe ... > 
    <amp-img .../> 
</amp-iframe> 
संबंधित मुद्दे