Vue使用Google Map

一、使用前提条件

1、谷歌开发者账号

2、账号要绑定借记卡用来后续api的收费，（好像不支持大陆借记卡）

二、新增项目，添加引用的API

 三、凭据里面创建凭据，获得api的key

 四、vue安装依赖并初始化

npm install @googlemaps/js-api-loader

<template>
<!--要给盒子设置宽高 -->
 <div id="map" /> 
</template>


<script>
import { Loader } from "@googlemaps/js-api-loader"
const loader = new Loader({
  apiKey: "apikey", //api的key
  version: "weekly", //版本
  libraries: ["places"],
})
export default {
 data() {
   return {
    google: '',
    map: '',
    service: '',
    infoWindow: '',
    marker: ''
   }
 },
 methods: {
  // 地图初始化
  initMap() {
      const mapOptions = {
        center: { lat: 22.602, lng: 114.043 },
        zoom: 6
      }
      loader
        .load()
        .then((google) => {
          this.google = google
          this.map = new google.maps.Map(
            document.getElementById("map"),
            mapOptions
          )
          // service 地点查询类
          this.service = new google.maps.places.PlacesService(this.map)
          this.infoWindow = new google.maps.InfoWindow({ // 地图信息窗口
            content: "",
            // disableAutoPan: true,
          })
          this.marker = new google.maps.Marker() // 地图标记类
          this.google.maps.event.addListener(this.map, 'click', this.clickMap) // 监听地图点击事件
        }).catch((e) => {
          console.log(e)
        })
    },
 }
}
</script>

五、遇到的问题

1、怎么控制缩放zoom的数值大小以自动展示地图查询地点的详情：比如我搜索加拿大地图是展示这个国家的领土大小，我搜索加拿大Canada某个街道地图是放大到能展示街道具体的建筑物，缩放等级的控制问题让我找了半天的api

this.marker.setMap(null) // 清除之前的标记

const request = {
      query： '深圳市福田区平安大厦', // 搜索文本
      fields: ['name', 'geometry', 'place_id'], // 指定要返回的数据字段， 也可以写成 fields: ['all']
        }
this.service.textSearch(request, (results, status) => {
   if (status === this.google.maps.places.PlacesServiceStatus.OK) {
      console.log('search', results[0])
      let res = results[0]
      this.marker = new this.google.maps.Marker({ // 给搜索地点添加地图标记
          position: res.geometry.location,
          map: this.map,
      })
      this.map.setCenter(this.marker.getPosition()) // 以搜索点为中心
      let myLatLngBounds = new this.google.maps.LatLngBounds(res.geometry.viewport) // 当前地点的几何视口
      this.map.fitBounds(myLatLngBounds) // 设置视口，使其包含指定边界。改变zoom缩放级别
      this.marker.addListener("click", (e) => { // 给标记添加点击事件
          this.infoWindow.setContent(res.name);
          this.infoWindow.open(this.map, this.marker);
          this.map.setZoom(this.map.getZoom() + 1)
       })
       if(res.place_id) resolve(res.place_id)
   }
 })

https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngBounds
google.maps.LatLngBounds 类 LatLngBounds实例代表以地理坐标表示的矩形，包括与 180 度子午线相交的矩形。

 

 

 2、搜索到地点后怎么取到国家、城市、区县、街道的值
Geocoding Service | Maps JavaScript API | Google Developers

• country 表示国家/地区政治实体，通常是地理编码器返回的最高顺序类型。
• administrative_area_level_1 表示国家/地区级别以下的一级行政实体。在美国，这类行政级别是指州。并非所有国家/地区都有这些行政级别。在大多数情况下，admin_area_level_1 简称与 ISO 3166-2 子类及其他广泛传播的名单非常接近；不过，这种实现方式无法保证，因为我们的地理编码结果基于各种信号和位置数据。
• administrative_area_level_2 表示国家/地区级别下的二级行政实体。在美国，这类行政级别是指县。并非所有国家/地区都有这些行政级别。
• administrative_area_level_3 表示国家/地区级别下的三级行政实体。此类型表示较小的行政部门。并非所有国家都设有这类行政级别

getDetailsInfo(placeId) {
      const request = {
        placeId,
        fields: ['all']
      }
      this.service.getDetails(request, (res, status) => {
        if (status === this.google.maps.places.PlacesServiceStatus.OK) {
          console.log('details', res)
          let addressList = res.address_components, street = res.formatted_address.split(' ')
          let i = 0;
          for(i; i < addressList.length; i++) {
            if (addressList[i].types.includes('country')) this.region.country = addressList[i].long_name
            if (addressList[i].types.includes('administrative_area_level_1')) this.region.province = addressList[i].long_name
            if (addressList[i].types.includes('locality')) this.region.city = addressList[i].long_name
            else if (addressList[i].types.includes('sublocality_level_1')) this.region.city = addressList[i].long_name
          }
        }
      })
    },