谷歌地图 API 开发之新建地图

时间 2019-11-16

标签谷歌地图 api 开发新建栏目 Chrome 繁體版

原文原文链接

最近项目用到谷歌地图，可是看谷歌api文档，对于国人来讲，仍是比较吃力的，网上找资料也并无太多的资料，因此就想分享给你们。可是由于本人太懒了，每次研究技术完事时间一久就忘了，更别提分享了，在朋友的鼓励支持之下，从新开始写博客，共享给你们，若是有不到位或者错误的地方还但愿你们多多指教。毕竟交流才会进步(^o^)/~ javascript

好了，废话很少说开始正题。css

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

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

<!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里须要一个秘钥，如今引用的这个是可用的，若是想本身建立一个能够去官网里本身申请建立。segmentfault

下面说下Google 地图建立注意点：api

1. 必须是用 <!DOCTYPE html> 声明以 HTML5 形式声明应用。浏览器

大多数浏览器使用 "标准模式" 的 HTML5 文档渲染页面，这就意味着你的应用是兼容各大浏览器的。async

另外，若是没有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%。ui

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 ，卧槽，大骂一句，放到这么不起眼的地方，这不坑人么。这句话应该删除的。

后来仔细想一想，仍是本身技术不够扎实，若是没有callback 这个js里的initMap() 又怎么会执行呢？

今天先写这么多，明天写下如何建立marker标记，记录坐标位置，加油(^o^)/~