## 谷歌地图使用 vue2.X

• 项目：海外项目
• 项目背景：支持在国内实时监控及指挥海外项目地工作
• 需求：实现全球地图静态展示，搜索关键字并定位，海外项目驻点地图标记等基础地图功能

谷歌开发者平台注册

登录谷歌开发者平台注册账号并完善结算账号 developers.google.cn/learn/pathw…

控制台，开通api

账户完善后，进入控制台，点击api

以上则为已开通的map api服务。

项目引入

在vue项目 public/index.html 页面 引入js

// index.html
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=weekly"></script>`

组件封装使用

在需要使用的vue页面初始化地图数据

// **template部分**
<template>
  <div class="googleWebMap-container app-container">
    谷歌地图服务
    <div id="ggMap" ref="ggMap" style="height: 700px; width: 100%"></div>
  </div>
</template>

<script>
const option = {
  zoom: 18, // 缩放大小
  center: { lng: 113.323037, lat: 23.092661 }, // 地图中心点
  disableDefaultUI: false,
  mapTypeId: "roadmap" // 类型 satellite 卫星， hybrid 卫星和路线切换
};
export default {
  name: "googleWebMap",
  data() {
    return { maps: null };
  },
  mounted() {
    this.initMaps();
  },
  methods: {
    initMaps() {
      this.maps = new google.maps.Map(this.$refs.myMap, option);
    }
  }
};
</script>
<style lang="scss" scoped>
.googleWebMap-container {
  padding: 0;
}
</style>