目录
一、获取密钥API Key
  1、创建项目
  2、启用Maps JavaScript API服务
  3、创建API Key
  4、设置结算账户
二、头文件中引入api资源文件
  1、获取Ip所属区域
  2、根据地区加载不同的资源
三、Google Maps API基本使用
  1、加载地图
  2、添加标注点
  3、自定义图标
  4、信息窗口
  5、监听地图事件

一、获取密钥API Key
要使用Google Maps JavaScript API，必须获得一个可用的API密钥。
步骤是：创建项目-启用Maps JavaScript API服务-创建API密钥-设置结算账户

1、用谷歌账户登录谷歌云平台
https://cloud.google.com/maps-platform/?hl=zh-cn
进入控制台，如果是第一次登录，系统会直接提示你创建一个新项目，点击创建
  

2、创建完成后选择已创建的项目，选择[API和服务]-[库]，选择[Maps JavaScript API]，在打开的页面中点击[启用]
 

3、在导航菜单中找到[API和服务]-[凭据]，如果导航菜单隐藏，点击图标显示菜单
 

创建API密钥
 

点击[限制密钥]

在[应用限制]里我们对密钥使用进行限制，只允许特定的地址使用密钥，这样可以防止我们的配额泄露或被窃取。
4、正常使用API Key需要开通结算账户
在[导航菜单]-[结算]中关联结算账户，注意需要信用卡验证身份，支持VISA、运通、JCB、MasterCard，暂不支持银联。验证身份时会先扣除一美元，验证成功后会返还。
没有开通结算账户，密钥不能正常使用，会在页面出现如下覆盖层
 

 

二、头文件中引入api资源文件
谷歌地图API的使用和百度地图一样，在head中引入即可,

<script src="http://ditu.google.cn/maps/api/js?&key=yourkey"></script>

官方的方式是这样的，

<script src="https://maps.googleapis.com/maps/api/js?&key=yourkey"></script>

http://ditu.google.cn，是针对国内用户的，官方提供的https://maps.googleapis.com，在国内无法访问。
我自己测试了下，在国外http://ditu.google.cn，也是可以使用的，所以我暂时先都用http://ditu.google.cn，后续发现问题会再更改更新博客。
另外我发现一个问题，在外网环境下，本地调试无论哪种方式都加载不出来，上传到服务器之后就正常了，把我的情况列出来供大家参考。

最好的方式还是根据用户的IP归属，加载不同的资源。
1、获取Ip所属区域
获取IP及地区信息，有两种方式，第一种自己写程序解析，需要数据库支持，第二种调用第三方api，比较方便易上手。

在vue中，我尝试了多种方式，直接在index.html的header中引入， sohu提供的第三方api是可以的

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

新浪和网易有道的没有效果，可能需要通过后台请求，没有实践过
http://www.youdao.com/smartresult-xml/search.s
http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js

搜狐api可以同时得到ip和地区，返回的一个参数cname可能是城市可能是国家，还是建议通过搜狐或其他方式获取ip然后后台搭程序查询ip归属地，如果是国内就用http://ditu.google.cn，国外就用https://maps.googleapis.com。
 

 
2、实现根据条件加载不同的资源
Vue工程中， index.html文件，通过sohuAPI获取ip等信息存入cookie

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript">
      console.log(returnCitySN)
      document.cookie=returnCitySN["cip"]
    </script>

App.vue 

    var x = document.cookie
    console.log(x)
    if ('条件判断') {
      document.write('<script src="http://ditu.google.cn/maps/api/js? &key=yourkey"><\/script>')
    }
    console.log('cookieget')

三、Google Maps API基本使用
在vue中，index.html引入文件，地图页面GMap.vue页面上引入google
import google from 'google'
如果vue报错，根据提示安装相关模块，可能需要安装以下两个
npm install --save google
npm install vue2-google-maps

**************************  2018.12.12更新 ****************************

'Map' of undefined解决方法

1、webpack.base.conf.js的module.exports里加一句
  externals: {
    'google': 'google'
  },
2、安装依赖包
npm install vue2-google-maps

这两步做完差不多就可以了，如果还是有问题，换一换执行步骤，可以把安装包卸载重装

最后注意map容器要有大小（不要设置成100%）否则会不显示

***************************************************************************
1、加载地图
首先定义一个地图容器

<template>
  <div class="mapdiv">
    <div id="allmap"></div>
  </div>
</template>

设定中心点和缩放级别，就可以实例化一张地图

      this.ptcenter = {
        lat: 38.281616,
        lng: 175.026542
      },
      this.map = new google.maps.Map(document.getElementById('allmap'), {
        center: this.ptcenter,
        zoom: 3
        // mapTypeId: google.maps.MapTypeId.ROADMAP
      })

默认有鼠标拖动、鼠标滚轮缩放、双击放大（左击）或缩小（右击）功能，放大缩小、地图/卫星图切换控件。
mapTypeId参数有四个值，HYBRID，ROADMAP，SATELLITE，TERRAIN，对应的效果如下，默认的是ROADMAP。

 

2、添加标注点
 

      this.ptstart = {
        lat: 29.860346,
        lng: 121.632576
      }
      var markerStart = new google.maps.Marker({
        position: this.ptstart
      })
      markerStart.setMap(this.map)

还有一种方式

      this.ptstart = {
        lat: 29.860346,
        lng: 121.632576
      }
      var markerStart = new google.maps.Marker({
        position: this.ptstart,
        map: this.map
      })

但是这种方式vue会一直报错'markerStart' is assigned a value but never used，不影响程序运行，如果介意报错信息就采用第一种方式
删除标记的语句是

markerStart.setMap(null)

3、自定义图标

      var markerShip = new google.maps.Marker({
        position: this.ptship,
        icon: '/static/ship.png'
      })
      markerShip.setMap(this.map)

只要加一个icon参数即可

4、信息窗口
 

      var infowindow = new google.maps.InfoWindow({
        content: '测试信息窗口'
      })
      markerStart.addListener('click', function () {
        infowindow.open(this.map, markerStart)
      })

信息窗口的content也可以是html语句

5、监听地图事件

      google.maps.event.addListener(this.map, 'click', function (event) {
        var marker2 = new google.maps.Marker({
          position: event.latLng,
          map: this.map
        })
      }.bind(this))

更多用法参考官方文档
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn