谷歌翻译 网页嵌入代码_在网页上嵌入Google地图

谷歌翻译 网页嵌入代码

Maps are extremely useful ways to visualize the locations of business and events on web pages. For this example I'll use the Google Maps service, although there are other options.

地图是在网页上可视化业务和事件位置的极其有用的方法。 对于本示例，我将使用Google Maps服务 ，尽管还有其他选择。

First, find your location in Google Maps, and the appropriate zoom level. Then, click on the menu icon in the top left corner of the window (the three lines icons) and choose the Share and Embed option. The code generated will look like the following:

首先，在Google地图中找到您的位置，以及适当的缩放级别。 然后，单击窗口左上角的菜单图标(三行图标)，然后选择“ 共享和嵌入”选项。 生成的代码如下所示：

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d390263.5666142733!2d-97.80223175875516!3d40.16602063073909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1390025622921" width="600" height="450" frameborder="0" style="border:0"></iframe>

To apply it to your page, simply copy and paste the code into your HTML. Note that the result is fixed in width and height; i.e. it is not responsive. To make the map responsive, remove the width and height attributes of the iframe element and use the technique detailed in the article on making YouTube iframes responsive.

要将其应用于页面，只需将代码复制并粘贴到HTML中即可。 注意结果的宽度和高度是固定的； 即它没有React 。 为了使地图响应，取出width和height的属性iframe元素，并使用在文章中详细的技术使得YouTube的I帧响应 。

Embedding the map will bring all the interactivity one associates with Google Maps on your webpage: scrolling, zooming, etc. While that is wonderful, the interactive map takes some time to load. Sometimes, you simply need a fast image of your location, which is made possible by using the Google Static Map API. The simplest required parameters for the API are:

嵌入地图将使您与网页上的Google Maps关联的所有交互性：滚动，缩放等。这很棒，但交互式地图需要花费一些时间来加载。 有时，您只需要快速获取位置图像即可，这可以通过使用Google静态地图API来实现。 API所需的最简单参数为：

http://maps.google.com/maps/api/staticmap?center=SAIT,AB&zoom=14&size=400x400&sensor=false

center takes either an address (just as you would type into Google Maps) or latitude and longitude data. zoom is the level of zoom, and size is the width and height of the image. sensor is false on the assumption that there is no location awareness on the device you are sending the data to: if you were sending the static map to an iPhone or other device with location awareness, this could be switched to true.

中心将使用地址(就像您在Google地图中键入的一样)或经纬度数据。 zoom是缩放级别， size是图像的宽度和高度。 假设您要将数据发送到的设备上没有位置识别，则sensor为false ：如果将静态地图发送到具有位置识别的iPhone或其他设备，则可以将其切换为true 。

Using the URL to produce an image is the simplest thing in the world – just put the URL as the src value in an img tag, remembering to replace & symbols with & where necessary if you want the page to remain valid. For example, this:

使用URL生成图像是世界上最简单的事情–只需将URL作为src值放在img标签中，记住要用&替换&符号& 如果需要页面保持有效，则在必要的地方。 例如，这：

<img src="http://maps.google.com/maps/api/staticmap?center=SAIT,%20AB &zoom=1 &size=550x485 &maptype=satellite &sensor=false" alt="Map of the world supplied by Google Maps">

…produces the image you see at the top of this article. Much more is possible, including routes, markers, and highlighted areas, and different formats for the image. Note that even if the map is made responsive, it does not remain target-centered on resize; I have an article on how to achieve that.

…产生您在本文顶部看到的图像。 还有更多可能，包括路线，标记和突出显示的区域，以及图像的不同格式。 请注意，即使使地图响应，它也不会保持目标大小为中心。 我有一篇关于如何实现这一目标的文章。

coveloping offers an excellent Google Maps generator with many options, as does mapbuildr.

coveloping提供了一个极好的谷歌地图生成器有多种选择，一样mapbuildr 。

翻译自: https://thenewcode.com/132/Embedding-A-Google-Map-On-A-Web-Page

谷歌翻译 网页嵌入代码