将带有标记的Google Map添加到您的网站
介绍
本教程向您展示如何向网页添加带有标记的简单Google地图。它适合具有HTML和CSS的初学者或中级知识,以及一点点JavaScript的人。有关创建地图的高级指南,请阅读 开发者指南。
以下部分显示了在本教程中创建地图所需的全部代码。
自己尝试
您可以通过单击<>
代码窗口右上角的图标来在JSFiddle中尝试此代码。
<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
<span style="color:#3b78e7"><head></span>
<span style="color:#3b78e7"><style></span>
<span style="color:#d81b60">/* Set the size of the div element that contains the map */</span>
#map {
<span style="color:#3b78e7">height</span>: <span style="color:#c53929">400px</span>; <span style="color:#d81b60">/* The height is 400 pixels */</span>
<span style="color:#3b78e7">width</span>: <span style="color:#c53929">100%</span>; <span style="color:#d81b60">/* The width is the width of the web page */</span>
}
<span style="color:#3b78e7"></style></span>
<span style="color:#3b78e7"></head></span>
<span style="color:#3b78e7"><body></span>
<span style="color:#3b78e7"><h3></span>My Google Maps Demo<span style="color:#3b78e7"></h3></span>
<span style="color:#d81b60"><!--The div element for the map --></span>
<span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
<span style="color:#3b78e7"><script></span>
<span style="color:#d81b60">// Initialize and add the map</span>
<span style="color:#3b78e7">function</span> initMap() {
<span style="color:#d81b60">// The location of Uluru</span>
<span style="color:#3b78e7">var</span> uluru = {lat: -<span style="color:#c53929">25.344</span>, lng: <span style="color:#c53929">131.036</span>};
<span style="color:#d81b60">// The map, centered at Uluru</span>
<span style="color:#3b78e7">var</span> map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(
document.getElementById(<span style="color:#0d904f">'map'</span>), {zoom: <span style="color:#c53929">4</span>, center: uluru});
<span style="color:#d81b60">// The marker, positioned at Uluru</span>
<span style="color:#3b78e7">var</span> marker = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({position: uluru, map: map});
}
<span style="color:#3b78e7"></script></span>
<span style="color:#d81b60"><!--Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
--></span>
<span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
<span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"></script></span>
<span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>
入门
使用网页上的标记创建Google地图的三个步骤:
您需要一个网络浏览器。根据您的平台选择知名的浏览器,例如Google Chrome(推荐),Firefox,Safari或Internet Explorer。
步骤1:建立HTML网页
这是基本HTML网页的代码:
<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
<span style="color:#3b78e7"><head></span>
<span style="color:#3b78e7"><style></span>
#map {
<span style="color:#3b78e7">width</span>: <span style="color:#c53929">100%</span>;
<span style="color:#3b78e7">height</span>: <span style="color:#c53929">400px</span>;
<span style="color:#3b78e7">background-color</span>: grey;
}
<span style="color:#3b78e7"></style></span>
<span style="color:#3b78e7"></head></span>
<span style="color:#3b78e7"><body></span>
<span style="color:#3b78e7"><h3></span>My Google Maps Demo<span style="color:#3b78e7"></h3></span>
<span style="color:#d81b60"><!--The div element for the map --></span>
<span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
<span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>
请注意,这是一个非常基本的页面,标题级别为三(h3
),一个 div
元素和一个style
元素。您可以将任何喜欢的内容添加到网页。
自己尝试
上面的示例代码的右上角是三个按钮。单击最左侧的按钮以在JSFiddle中打开示例。
了解代码
下面的代码创建一个由头和主体组成的HTML页面。
<span style="color:#37474f"><span style="color:#3b78e7"><html></span>
<span style="color:#3b78e7"><head></span>
<span style="color:#3b78e7"></head></span>
<span style="color:#3b78e7"><body></span>
<span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span>
</span>
您可以使用以下代码在地图上方添加三级标题。
<span style="color:#37474f"><span style="color:#3b78e7"><h3></span>My Google Maps Demo<span style="color:#3b78e7"></h3></span>
</span>
以下代码定义了Google地图页面的区域。
<span style="color:#37474f"><span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
</span>
在本教程的此阶段div
,由于您尚未添加地图,因此只会显示为灰色块。以下代码描述了设置的大小和颜色的CSS div
。
<span style="color:#37474f"><span style="color:#3b78e7"><style></span>
#map {
<span style="color:#3b78e7">width</span>: <span style="color:#c53929">100%</span>;
<span style="color:#3b78e7">height</span>: <span style="color:#c53929">400px</span>;
<span style="color:#3b78e7">background-color</span>: grey;
}
<span style="color:#3b78e7"></style></span>
</span>
在上面的代码中,style
元素设置div
地图的大小。将div
宽度和高度设置为大于0px,以使地图可见。在这种情况下,将div
设置为400像素的高度和100%的宽度,以显示网页的整个宽度。应用于 background-color: grey
以在div
网页上查看地图区域。
步骤2:使用标记添加地图
本节向您展示如何将Maps JavaScript API加载到您的网页中,以及如何编写自己的JavaScript,该JavaScript使用该API在地图上添加带有标记的地图。
<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
<span style="color:#3b78e7"><head></span>
<span style="color:#3b78e7"><style></span>
<span style="color:#d81b60">/* Set the size of the div element that contains the map */</span>
#map {
<span style="color:#3b78e7">height</span>: <span style="color:#c53929">400px</span>; <span style="color:#d81b60">/* The height is 400 pixels */</span>
<span style="color:#3b78e7">width</span>: <span style="color:#c53929">100%</span>; <span style="color:#d81b60">/* The width is the width of the web page */</span>
}
<span style="color:#3b78e7"></style></span>
<span style="color:#3b78e7"></head></span>
<span style="color:#3b78e7"><body></span>
<span style="color:#3b78e7"><h3></span>My Google Maps Demo<span style="color:#3b78e7"></h3></span>
<span style="color:#d81b60"><!--The div element for the map --></span>
<span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
<span style="color:#3b78e7"><script></span>
<span style="color:#d81b60">// Initialize and add the map</span>
<span style="color:#3b78e7">function</span> initMap() {
<span style="color:#d81b60">// The location of Uluru</span>
<span style="color:#3b78e7">var</span> uluru = {lat: -<span style="color:#c53929">25.344</span>, lng: <span style="color:#c53929">131.036</span>};
<span style="color:#d81b60">// The map, centered at Uluru</span>
<span style="color:#3b78e7">var</span> map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(
document.getElementById(<span style="color:#0d904f">'map'</span>), {zoom: <span style="color:#c53929">4</span>, center: uluru});
<span style="color:#d81b60">// The marker, positioned at Uluru</span>
<span style="color:#3b78e7">var</span> marker = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({position: uluru, map: map});
}
<span style="color:#3b78e7"></script></span>
<span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
<span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"></script></span>
<span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>
自己尝试
上面的示例代码的右上角是三个按钮。单击最左侧的按钮以在JSFiddle中打开示例。
了解代码
请注意,以上示例不再包含为div
灰色着色的CSS 。这是因为div
现在包含地图。
在下面的代码中,script
从指定的URL加载API。
<span style="color:#37474f"><span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
<span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"></script></span>
</span>
在上面的代码中,callback
参数initMap
在API加载后执行 函数。该async
属性允许浏览器在加载API时继续呈现页面的其余部分。该key
参数包含您的API密钥。在JSFiddle中尝试本教程时,您不需要自己的API密钥。
请参阅第3步:获取API密钥,以获取有关稍后获取自己的API密钥的说明。
以下代码包含在initMap
网页加载时初始化和添加地图的功能。使用script
标签来包含自己的包含该initMap
功能的JavaScript 。
<span style="color:#37474f"><span style="color:#3b78e7"><script></span>
<span style="color:#3b78e7">function</span> initMap() {
}
<span style="color:#3b78e7"></script></span>
</span>
添加该getElementById()
功能以div
在网页上查找地图。
下面的代码构造了一个新的Google maps对象,并向地图添加了包括中心和缩放级别的属性。有关其他属性选项,请参见文档 。
<span style="color:#37474f">{
<span style="color:#3b78e7">var</span> uluru = {lat: -<span style="color:#c53929">25.344</span>, lng: <span style="color:#c53929">131.036</span>};
<span style="color:#3b78e7">var</span> map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(document.getElementById(<span style="color:#0d904f">'map'</span>), {
zoom: <span style="color:#c53929">4</span>,
center: uluru
});
}
</span>
在上面的代码中,new google.maps.Map()
创建一个新的Google maps对象。该center
属性告诉API地图的中心位置。地图坐标按以下顺序设置: 纬度,经度。
了解有关 获取纬度/经度坐标或将地址转换为地理坐标的更多信息。
该zoom
属性指定地图的缩放级别。缩放:0是最低的缩放,并显示整个地球。将缩放值设置得较高可以以更高的分辨率放大地球。
下面的代码在地图上放置了一个标记。该position
属性设置标记的位置。
<span style="color:#37474f"><span style="color:#3b78e7">var</span> marker = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({
position: uluru,
map: map
});
</span>
步骤3:取得API金钥
本部分说明了如何使用您自己的API密钥向Google Maps JavaScript API验证您的应用程序。
请按照以下步骤获取API密钥:
-
创建或选择一个项目。
-
单击继续以启用API和所有相关服务。
-
在“ 凭据”页面上,获取一个API密钥 (并设置API密钥限制)。注意:如果您具有现有的不受限制的API密钥,或具有浏览器限制的密钥,则可以使用该密钥。
-
为防止配额失窃并保护您的API密钥,请参阅 使用API密钥。
-
(可选)启用结算。有关 更多信息,请参见使用限制。
-
将本教程的整个代码从此页面复制到文本编辑器。如果还没有文本编辑器,请参考以下建议:可以使用:Notepad ++(对于Windows);TextEdit(适用于macOS); gedit,KWrite等(对于Linux机器)。
-
key
用您自己的API密钥(即您刚获得的API密钥)替换URL 中的参数值。<span style="color:#37474f"><span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span> <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span> <span style="color:#3b78e7"></script></span> </span>
-
使用以.html结尾的名称保存该文件,例如google-maps.html。
-
通过将HTML文件从桌面拖动到浏览器中,将其加载到Web浏览器中。或者,双击文件可在大多数操作系统上使用。
提示和故障排除
提示:查看“ 商店定位器”解决方案, 以查看使用自定义标记在地图上可视化数据的更全面的示例。
- 使用JSFiddle界面在单独的窗格中显示HTML,CSS和JavaScript代码。您可以运行代码并在“ 结果”窗格中显示输出。
- 您可以调整样式和属性等选项以自定义地图。有关自定义地图的更多信息,请阅读样式指南 以及 在地图上绘图。
- 使用Web浏览器中的开发人员工具控制台来测试和运行代码,阅读错误报告并解决代码问题。
- 使用以下键盘快捷键在Chrome中打开控制台:
Command + Option + J(在Mac上)或Control + Shift + J(在Windows上)。 -
请按照以下步骤获取Google地图上某个位置的纬度和经度坐标。
- 在浏览器中打开Google地图。
- 右键点击地图上您需要坐标的确切位置。
- 从出现的上下文菜单中选择“这里是什么 ”。该地图在屏幕底部显示一张卡片。在卡片的最后一行中找到纬度和经度坐标。
-
您可以使用地理编码服务将地址转换为纬度和经度坐标。开发人员指南提供了有关开始使用地址解析服务的详细信息 。