记录一次vue项目引入GoogleMap API进行地图定位

背景

公司项目进行国际化处理，需要将定位信息地图替换成谷歌地图。

一.Google 账号准备

用谷歌账户登录谷歌云平台 https://cloud.google.com/maps-platform/?hl=zh-cn
如果是新开账户的话，需要手动创建新的项目newProject（系统会有提示）
1. 创建完成后选择已创建的项目newProject，选择[API和服务]>>[库]
2. 然后选择[Maps JavaScript API]，在打开的页面中点击[启用]
3. 在导航菜单中找到[API和服务]>>[凭据]（参照第一幅图），如果导航菜单隐藏，点击图标显示菜单；
进入凭据菜单，创建凭据>>API 秘钥

ps: 点击创建完成的API 秘钥，我们对密钥使用进行限制，只允许特定的地址使用密钥，这样可以防止我们的配额泄露或被窃取。可以根据个人或项目所需进行设置。
4. 正常使用API Key需要开通结算账户
在[导航菜单]>>[结算]中关联结算账户，注意需要信用卡验证身份，支持VISA、运通、JCB、MasterCard，暂不支持银联。验证身份时会先扣除一美元，验证成功后会返还。
没有开通结算账户，密钥虽然也可以使用，会在地图上出现如下覆盖层

二、项目中引入地图

当上述google操作完成获取到API就可以在自己的项目中引用
国内版

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

或者使用官方版的

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

这个我没有具体测试过二者的区别，借鉴大佬的内容
https://blog.csdn.net/feiyu_may/article/details/83869037?utm_source=app

• 在Vue项目实装
  1. 组件封装形式 先定义一个remote.vue组件 引入远程script包 利用创建节点方法

<template>
  <remote-js :src="this.jsUrl" @load-js-finish="this.jsLoadCallBack"></remote-js>
</template>

<script>
export default {
  components: {
    'remote-js': {
      render (createElement) {
        var self = this
        return createElement('script', {
          attrs: { type: 'text/javascript', src: this.src },
          on: {
            load: function() {
              // console.log('load js')
              self.$emit('load-js-finish')
            }
          }
        })
      },
      props: {
        src: { type: String, required: true }
      }
    }
  },
  props: {
    jsUrl: { type: String, required: true }, // 需要加载的外部url
    jsLoadCallBack: Function// 外部js加载完成回调
  }
}
</script>

2. 在父组件Gmaps.vue中引入调用子组件
ps： <div id=“Gmaps”></div> map容器一定要写在上面

<template>
  <div>
    <div id="Gmaps"></div>
    <remote-js
      jsUrl="https://ditu.google.cn/maps/api/js?v=3&key=在此处填写Google控制台获取到的key"
      :js-load-call-back="loadRongJs"
    ></remote-js>
  </div>
</template>
<script>
import RemoteJs from './remote'
export default {
  components: { RemoteJs },
  props: {
    mapData: {
      type: Object,
      required: true
    }
  },
  methods: {
    loadRongJs() {
      // console.log(this.mapData)
      var options = {
        zoom: 15,
        // 1：世界
		// 5：大陆/大陆
		// 10：城市
		// 15：街道
		// 20：建筑物
        center: { lat: this.mapData.latitude, lng: this.mapData.longitude },
        // 动态从调用组件传递经纬度
        disableDefaultUI: false,
        zoomControl: true
      }
      var map = new google.maps.Map(document.getElementById('Gmaps'), options)
      let marker = new google.maps.Marker({
        position: { lat: this.mapData.latitude, lng: this.mapData.longitude },
        map: map,
        title: 'Google Map', // 鼠标悬浮显示
        // 此处的icon为标记的自定义图标
        // icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        // animation:  google.maps.Animation.DROP,
        width: '20px',
        height: '20px'
      })
      marker.setMap(map)
		
	 // 配置定位点鼠标点击显示内容 本文是父组件传过来的
      var infowindow = new google.maps.InfoWindow({
        content: this.mapData.address
      })
      marker.addListener('click', function() {
        infowindow.open(map, marker)
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #Gmaps {
    width: 100%;
    height: 28rem;
    border-radius: 5px;
  }
</style>

3. 在项目中需要使用的地方引入Gmap

 <GMaps id="allmap" class="Gmaps"></GMaps>

script里引入

import GMaps from '@/views/components/GoogleMaps/Gmap'

在component使用：

 components: {  GMaps },

组件内使用并传值

<GMaps class="Gmaps" :map-data="mapData"/>

4. 多点标注 （根据父组件所传地理位置进行定位，经纬度定位请看引用文章vue使用Google地图）
PS：地理位置定位需要引入https://maps.googleapis.com/maps/api/place/js/PlaceService，此api需要翻墙

var service = new google.maps.places.PlacesService(map)
在加载方法loadRongJs() 中使用以下代码

	var requests = []
      var service = new google.maps.places.PlacesService(map)
      that.mapData.address.map(addr => {
        requests.push({
          query: addr,
          fields: ['name', 'geometry']
        })
      })
      requests.map(request => {
        // debugger
        service.findPlaceFromQuery(request, function(results, status) {
          // console.log(results)
          if (status === (google.maps.places.PlacesServiceStatus.OK)) {
            for (var i = 0; i < results.length; i++) {
              that.createMarker(results[i], map)
            }
            // map.set(results[0].geometry.location)
            // map.setCenter(results[0].geometry.location)
          }
        })
      })

引用另外方法

	createMarker(place, map) {
      var marker = new google.maps.Marker({
        map: map,
        title: place.name,
        position: place.geometry.location
      })
      var infowindow = new google.maps.InfoWindow()
      marker.addListener('click', function() {
        infowindow.setContent(place.name)
        infowindow.open(map, marker)
      })
    }

本文章参考文章列表：
谷歌地图官方文档
谷歌地图API教程及在VUE中的使用；
vue引入google地图script包…国内；
vue使用Google地图；