vue 使用google map --地图显示

1: 申请key 。打开 api key ，往下滑，找到下图模块，选择 "WEB APIS" 模块下的 "Maps JavaScript API" 。

 打开后看到 "Get the API key" 下的指导说明，跟着指导步骤走即可。（其中第2步是在第1步打开的控制台上方）

2: 引入googlemap。

在public —>index.html  引入： 

<script src="https://maps.googleapis.com/maps/api/js?key=申请的key"></script>

在 vue.config.js 添加

configureWebpack: {

    externals: {
      google: 'google'
    }
}

3: 地图初始化，可参照 文档  (其实看类文档是最快了解和使用api的方法)。

initMaps() {
      const option = {
        zoom: 18,
        // The initial Map center. Required.
        center: { lng: 113.323037, lat: 23.092661 },
        // Enables/disables all default UI. May be overridden individually.
        disableDefaultUI: false,
        // The initial Map mapTypeId. Defaults to ROADMAP.
        mapTypeId: 'roadmap' // satellite 卫星， hybrid 卫星和路线切换
      }
      this.maps = new google.maps.Map(this.$refs.gmap, option)
}

提示： 现在谷歌地图不免费了，要绑定信用卡会提升配额，超出配额会扣钱，所以只能放弃了。不绑定信用卡每天只能调用一次，超出会显示  You have exceeded your request quota for this API ，地图会出现水印

建议如果没有预算在这块需求上的，考虑换其它地图服务商。