2、谷歌地图API-将带有标记的Google Map添加到您的网站

编程语言 2020-03-01 21:00:46 阅读次数: 0

将带有标记的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地图的三个步骤：

  1. 创建一个HTML页面
  2. 使用标记添加地图
  3. 获取API密钥

您需要一个网络浏览器。根据您的平台选择知名的浏览器，例如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密钥：

  1. 转到 Google Cloud Platform Console。

  2. 创建或选择一个项目。

  3. 单击继续以启用API和所有相关服务。

  4. 在“ 凭据”页面上，获取一个API密钥 （并设置API密钥限制）。注意：如果您具有现有的不受限制的API密钥，或具有浏览器限制的密钥，则可以使用该密钥。

  5. 为防止配额失窃并保护您的API密钥，请参阅 使用API​​密钥。

  6. （可选）启用结算。有关 更多信息，请参见使用限制。

  7. 将本教程的整个代码从此页面复制到文本编辑器。如果还没有文本编辑器，请参考以下建议：可以使用：Notepad ++（对于Windows）；TextEdit（适用于macOS）; gedit，KWrite等（对于Linux机器）。

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

     

  9. 使用以.html结尾的名称保存该文件，例如google-maps.html。

  10. 通过将HTML文件从桌面拖动到浏览器中，将其加载到Web浏览器中。或者，双击文件可在大多数操作系统上使用。

提示和故障排除

提示：查看“ 商店定位器”解决方案， 以查看使用自定义标记在地图上可视化数据的更全面的示例。

  • 使用JSFiddle界面在单独的窗格中显示HTML，CSS和JavaScript代码。您可以运行代码并在“ 结果”窗格中显示输出。
  • 您可以调整样式和属性等选项以自定义地图。有关自定义地图的更多信息，请阅读样式指南 以及 在地图上绘图。
  • 使用Web浏览器中的开发人员工具控制台来测试和运行代码，阅读错误报告并解决代码问题。
  • 使用以下键盘快捷键在Chrome中打开控制台：
    Command + Option + J（在Mac上）或Control + Shift + J（在Windows上）。

  • 请按照以下步骤获取Google地图上某个位置的纬度和经度坐标。

    1. 在浏览器中打开Goog​​le地图。
    2. 右键点击地图上您需要坐标的确切位置。
    3. 从出现的上下文菜单中选择“这里是什么 ”。该地图在屏幕底部显示一张卡片。在卡片的最后一行中找到纬度和经度坐标。

  • 您可以使用地理编码服务将地址转换为纬度和经度坐标。开发人员指南提供了有关开始使用地址解析服务的详细信息 。

lwbsleep
发布了10 篇原创文章 · 获赞 0 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/lwbsleep/article/details/104599686
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022