如何将带有标记的谷歌地图添加到网站

谷歌地图是谷歌开发的网络地图服务。它提供卫星图像、街道地图、360°街道全景(街景)、实时交通状况(谷歌交通),以及步行、汽车、自行车(beta版)或公共交通的路线规划。

null

要在网站上添加带有标记的谷歌地图,需要三个基本步骤:

  • 创建一个HTML页面
  • 添加带有标记的地图
  • 获取API密钥

    第一步:创建一个Html页面。

    <!DOCTYPE html>
    < html >
    < head >
    < style >
    #map {
    width: 100%;
    height: 400px;
    background-color: grey;
    }
    </ style >
    </ head >
    < body >
    < p >My Google Maps Demo</ p >
    < div id = "map" ></ div >
    </ body >
    </ html >

    
    

    输出: 图片[1]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库 给定的代码描述了设置div大小和颜色的CSS。style元素为地图设置div大小。div的高度设置为400像素,宽度设置为100%,以显示整个网页宽度的地图。 图片[2]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

    代码为谷歌地图定义了页面的一个区域。div在输出中显示为灰色块,因为尚未添加贴图。

    图片[3]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库 步骤2:添加带有标记的地图:

    <!DOCTYPE html>
    < html >
    < head >
    < style >
    #map {
    height: 400px;
    width: 100%;
    }
    </ style >
    </ head >
    < body >
    < p >My Google Maps Demo</ p >
    < div id = "map" ></ div >
    < script >
    function initMap() {
    var test= {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: test
    });
    var marker = new google.maps.Marker({
    position: test,
    map: map
    });
    }
    </ script >
    < script async defer
    src =
    </ script >
    </ body >
    </ html >

    
    

    说明:

    • 在代码中,脚本从指定的URL加载API。
    • 回调参数在加载API后执行initMap函数。
    • async属性允许浏览器在加载API时继续呈现页面的其余部分。
    • key参数包含API密钥。
    • 在“key=”内键入api密钥。 图片[4]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

      该代码包含initMap函数,该函数在加载网页时初始化并添加映射。脚本标签可以用来添加你自己的javascript。 图片[5]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

    • 这段代码构造了一个新的Google maps对象,并向地图添加属性,包括中心和缩放级别。
    • 在下面的代码中,是new google。地图。Map()创建一个新的Google maps对象。
    • center属性告诉API地图的居中位置。地图坐标按以下顺序设置:纬度、经度。
    • zoom属性指定地图的缩放级别。缩放:0是最低的缩放,显示整个地球。将“缩放”值设置得更高,以更高的分辨率放大地球。

      图片[6]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

      下面的代码在地图上标出了一个标记。position属性设置标记的位置。 图片[7]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

    第3步:获取API密钥 以下是获取API密钥所需的步骤:

    1. 转到下面提到的链接 https://console.developers.google.com/flows/enableapi?apiid=maps_backend,地理编码\后端,方向\后端,距离\矩阵\后端,高程\后端,位置\后端&reusekey=true .
    2. 创建新项目或从现有项目中选择。
    3. 单击“继续”以启用API。
    4. 在凭证页面上,获取API密钥(并设置API密钥限制)。
    5. 用自己的API密钥替换URL中密钥参数的值

      输出: 图片[8]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

      示例:在谷歌地图上添加Geeksforgeks office city

      输入:

      <!DOCTYPE html>
      < html >
      < head >
      < style >
      #map {
      height: 400px;
      width: 100%;
      }
      </ style >
      </ head >
      < body >
      < h3 >GFG Google Maps Demo</ h3 >
      < div id = "map" ></ div >
      < script >
      function initMap() {
      var uluru = {lat: 28.501859, lng: 77.410320};
      var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
      });
      var marker = new google.maps.Marker({
      position: uluru,
      map: map
      });
      }
      </ script >
      < script async defer
      src=
      AIzaSyB2bXKNDezDf6YNVc -SauobynNHPo4RJb8& callback = initMap ">
      </ script >
      </ body >
      </ html >

      
      

      输出: 图片[9]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

      本文由 Shubrodeep Banerjee .如果你喜欢GeekSforgek,并想贡献自己的力量,你也可以使用 贡献极客。组织 或者把你的文章寄到contribute@geeksforgeeks.org.看到你的文章出现在Geeksforgeks主页上,并帮助其他极客。

      如果您发现任何不正确的地方,或者您想分享有关上述主题的更多信息,请写下评论。

  • © 版权声明
    THE END
    喜欢就支持一下吧
    点赞8 分享