谷歌舆图 API 开辟之新建舆图

2019年8月31日 182次阅读 来源: 旅图灬

近来项目用到谷歌舆图，然则看谷歌api文档，关于国人来讲，照样比较费劲的，网上找材料也并没有太多的材料，所以就想分享给人人。然则由于本人太懒了，每次研讨手艺完事时刻一久就忘了，更别提分享了，在朋侪的勉励支撑之下，重新最先写博客，同享给人人，假如有不到位或许毛病的处所还愿望人人多多指教。 毕竟交换才会提高(^o^)/~

好了，空话不多说最先正题。

谷歌舆图官网：https://developers.google.com…
入门指南：https://developers.google.com…

好了，下面就贴一段简朴的案例代码，入门指南里的

 <!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          html, body { height: 100%; margin: 0; padding: 0; }
          #map { height: 100%; }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script type="text/javascript">
            var map;
            function initMap() {
              map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
              });
            }
        </script>
        <script async defer
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&callback=initMap"></script>
      </body>    
    </html>

引入的js里需要一个秘钥，如今援用的这个是可用的，假如想本身建立一个能够去官网里本身请求建立。

下面说下Google 舆图建立注重点：

1. 必须是用 <!DOCTYPE html> 声明以 HTML5 情势声明运用。

大多数浏览器运用 “规范形式” 的 HTML5 文档衬着页面，这就意味着你的运用是兼容各大浏览器的。

别的，假如没有DOCTYPE标签，浏览器则运用混淆形式 (quirks mode)举行衬着页面内容。 提醒： 应当注重的是一些”混淆形式”中的CSS并不能运用与规范形式中。在详细的运用中，一切基于百分比的大小都必须从父块元素继续 。假如在父模块中没有指定大小，默认值为 0 x 0 像素。假如你想运用百分比，能够在<style> 标签中声明，以下所示：

<style type="text/css">
    html {height:100%}
    body {height:100%;margin:0;padding:0}
    #googleMap {height:100%}
</style>

请输入代码 这个款式声明表明舆图模块的（GoogleMap）应 HTML高度为100%。

2. 增加 Google 舆图 API Key

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

将google天生的 API key 放置于 key 参数中(key=YOUR_API_KEY)。 The sensor 参数是必须的，该参数用于指明运用程序是不是运用一个传感器 (相似 GPS 导航) 来定位用户的位置。参数值能够设置为 true 或许 false。

3. 舆图 DOM 元素

<div id="map"></div>

要想在网页上显现舆图，我们必须为其预留一个位置。我们一般的完成体式格局是：建立一个定名的 div 元素，然后在浏览器的文档对象模子 (DOM) 中猎取对该元素的援用。

4. 建立一个 Map 对象

map = new google.maps.Map(document.getElementById("map"), {...});

示意舆图的 JavaScript 类是 Map 类。该类的对象定义页面上的单个舆图。（您能够建立该类的多个实例–每一个对象都将定义页面上的一个差别舆图。）我们应用 JavaScript new 运算符来新建该类的实例。

当您新建舆图实例时，您需要在页面中以舆图容器情势指定一个 <div> HTML 元素。HTML 节点是 JavaScript document 对象的子项，我们经由过程 document.getElementById() 要领猎取对该元素的援用。

5. 定义舆图属性

每一个舆图都有两个必须选项：center 和 zoom。还能够加上MapTypeId

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

  • center（中间点）：中间属性指定了舆图的中间，该中间经由过程坐标（纬度，经度）在舆图上建立一个中间点。

  • Zoom（缩放级数）：zoom 属性指定了舆图的 缩放级数。zoom: 0 显现了全部地球舆图的完整缩放。

  • MapTypeId（舆图的初始范例）：mapTypeId 属性指定了舆图的初始范例。mapTypeId包含以下四种范例：

    • google.maps.MapTypeId.HYBRID：显现卫星图象的重要街道通明层

    • google.maps.MapTypeId.ROADMAP：显现一般的街道舆图

    • google.maps.MapTypeId.SATELLITE：显现卫星图象

    • google.maps.MapTypeId.TERRAIN：显现带有天然特性（如地形和植被）的舆图

好了，上述基础都是从官网上贴来整顿的，至此应当都能一般建立舆图了。

新手注重：

然则题目来了，由于当时做项目，项目比较大，而且时刻很紧，有个细节当时没注重，就是在写js的过程当中，函数定名必需要要有 initMap()，不然会报错，提醒 Uncaught InvalidValueError: initMap is not a function.

项目中有的舆图是需要点击弹出舆图层的，点击事宜才要实行要领，但是每次都是自动实行，提醒种种题目。百度谷歌了良久，答案纷飞，依然毫无眉目，然后又耐烦重新操作了一遍，看文档，对，当看到引入的js的时刻，内里有个&callback=initMap ，卧槽，痛骂一句，放到这么不起眼的处所，这不坑人么。 这句话应当删除的。

《谷歌舆图 API 开辟之新建舆图》

厥后细致想一想，照样本身手艺不够踏实，假如没有callback 这个js里的initMap() 又怎么会实行呢？

本日先写这么多，来日诰日写下怎样建立marker标记，纪录坐标位置，加油(^o^)/~

    原文作者：旅图灬
    原文地址: https://segmentfault.com/a/1190000006148926
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞