2014-01-22 25 views
7

在我的應用程序中,用戶只需將鏈接粘貼到YouTube或vimeo視頻或某些soundcloud音頻,然後通過oembed找出如何嵌入該鏈接。如何從新的Google Maps共享鏈接轉換爲嵌入HTML的iframe?

因此,如果您將鏈接粘貼到從您的地址欄複製的視頻,它可以算出來。如果您粘貼應用程序在「共享對話框」中彈出的共享鏈接,它也可以工作。如果您粘貼iframe嵌入代碼,我可以解析該代碼並將其與白名單進行比較,然後再次獲得完全相同的結果。

我也想添加谷歌地圖嵌入,但它不支持oembed。此外,您現在可以獲得「經典」(或舊版)Google地圖,但您也可以獲得新的Google地圖。 (使事情更復雜,你也得到谷歌地圖引擎,但讓我們現在忽略這一點..)

與經典谷歌地圖它是微不足道的從共享鏈接轉換爲iframe嵌入的URL,因爲它本質上相同的網址參數,您只需添加一個output = embed URL參數,以便Google將輸出嵌入式佈局而不是桌面網站佈局。

新的谷歌地圖並不那麼簡單。共享鏈接的參數與嵌入鏈接的參數不同,您不能只進行簡單的「前綴轉換」並獲得可用的內容。

我的意思是,這是一個共享網址:

https://www.google.com/maps/preview#!data=!1m4!1m3!1d62859!2d-99.1363591!3d19.4492142 

,這是嵌入iframe的爲同一地圖SRC:

https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d60194.35709853462!2d-99.1363591!3d19.4492142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1390394813768 

如果你只需要改變由前綴https://www.google.com/maps/preview#!data=https://www.google.com/maps/embed?pb=或退回它不起作用。

它看起來像在那裏的一些參數是一樣的,但顯然有更多的嵌入一個。

是否有文檔或代碼或示例或東西那裏解釋如何工作?我查看了我能想到的所有地方,並且我能找到的最接近的地方是iframely's google maps plugin,但它們只轉換some of the parameters,然後他們使用舊版Google地圖的嵌入。我寧願使用更小的新的,至少當有人粘貼鏈接或嵌入新的谷歌地圖。

TL;博士

我想轉換

https://www.google.com/maps/preview#!data=!1m4!1m3!1d62859!2d-99.1363591!3d19.4492142 

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d60194.35709853462!2d-99.1363591!3d19.4492142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1390394813768" width="600" height="450" frameborder="0" style="border:0"></iframe> 

https://www.google.com/maps/preview#!data=!1m4!1m3!1d316784!2d9.927821!3d53.558572!4m12!2m11!1m10!1s0x0%3A0x4263df27bd63aa0!3m8!1m3!1d303354!2d9.927821!3d53.558572!3m2!1i1024!2i768!4f13.1 

<iframe src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d303354.2311276431!2d9.927821!3d53.558572!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!1s0x0%3A0x4263df27bd63aa0!5e0!3m2!1sen!2sus!4v1390395234903" width="600" height="450" frameborder="0" style="border:0"></iframe> 

並使其工作,如果谷歌地圖支持oembed。我意識到iframe代碼有更多的信息,但對我來說唯一有用的屬性是寬度和高度,以獲得縱橫比和src。我懷疑大部分的url參數都可以被猜測或默認,因爲我只對座標和縮放級別感興趣。

+0

嘿,男士,現在有完全相同的問題。你有沒有運氣? – Lukas

回答

0

我看不到使用您自己保存的地圖中的一種來執行此操作的方法。但是,可以使用地名,座標或搜索結果:

顯示一個地方:

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI&amp;q=Space+Needle,Seattle+WA"> 

座標:

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI&amp;center=-33.8569,151.2152&amp;zoom=18&amp;maptype=satellite"></iframe> 

顯示的搜索結果:

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI&amp;q=record+stores+in+Seattle"></iframe> 
相關問題