vue项目 使用google地图

谷歌和高德地图都需要安装相关的js-api-loader

google地图与高德地图都需要有API密钥
以google map为例：

1111.png

创建google账号后 还需要生成对应的api密钥
需要用到的API：
Maps JavaScript API(包含基本地图实例创建)
Maps SDK for Android(移动端安卓使用)
Places API(地点查询接口)

相关api要添加到api密钥的编辑中去。

初始化地图：

需要导入包(同高德地图):
npm install @googlemaps/js-api-loader
需要用到的页面 局部引入：
import {Loader} from "@googlemaps/js-api-loader"
script中的代码:

import { Loader } from "@googlemaps/js-api-loader"
export default {
  props: {
    id: {
      type: String,
      default: () => {
        return "";
      },
    },
//从父组件获取点位
    lng: {
      type: Number | String,
      default: () => {
        return 108.2772
      }
    },
    lat: {
      type: Number | String,
      default: () => {
        return 14.0583
      }
    },
    width: {
      type: String,
      default: () => {
        return "100%";
      },
    },
    height: {
      type: String,
      default: () => {
        return "400px";
      },
    },
  },
  data () {
    return {
      map: null,
      value: '',
      service: null,
      markers: []
    }
  },
  created () {
    this.initMap()
  },
  watch: {},
  methods: {
    //初始化地图
    initMap () {
      let this_ = this
      const loader = new Loader({
        apiKey: "",//填写google控制台中的apikey
        version: "weekly",
        libraries: ["places", ""]
      });
      loader.load().then(() => {
        this.map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: Number(this.lat), lng: Number(this.lng) },
          zoom: 2,
          mapTypeControl: false,
          fullscreenControl: false,
          streetViewControl: false
        });
        this.service = new google.maps.places.PlacesService(this.map)
        let position
        if (this.lat == '' || this.lng == '' || this.lat == null || this.lng == null) {
          position = {
            lat: 14.0583,
            lng: 108.2772
          }
        } else {
          position = {
            lat: Number(this.lat),
            lng: Number(this.lng)
          }
        }
        const marker = new google.maps.Marker({
          position: { lat: position.lat, lng: position.lng },
          draggable: true,
          map: this.map,
          title: "",
        });
        google.maps.event.addListener(marker, 'dragend', function (event) {
          this_.mouseM(event)
        })
        this.markers.push(marker)
      });
    },
    //获取选择到的信息
    addMark (data) {
      let this_ = this
      let lat = data.geometry.location.lat()
      let lng = data.geometry.location.lng()
      let center = { lat: lat, lng: lng }
      this.map.setCenter(center)
      this.deleteMarkers()//清除之前添加的标记
      const marker = new google.maps.Marker({
        position: center,
        map: this.map,
        draggable: true,
        title: data.label
      });
      google.maps.event.addListener(marker, 'dragend', function (event) {
        this_.mouseM(event)
      })
      this.markers.push(marker)
    },
    // 根据拖拽确定坐标
    mouseM (data) {
      let markPosition = data.latLng.lng() + ',' + data.latLng.lat()
      this.$emit('markChange', markPosition)
    },
    //移除地图上的标记物
    deleteMarkers () {
      for (let i = 0; i < this.markers.length; i++) {
        this.markers[i].setMap(null)
      }
      this.markers = []
    },
    //地图搜索返回数据
    searchByName (searchStr) {
      return new Promise((resolve, reject) => {
        const request = {
          query: searchStr,
          fields: ["name"],
        };
        this.service.textSearch(request, (results, status) => {
          if (status === google.maps.places.PlacesServiceStatus.OK && results) {
            let data = this.dealCbData(results)
            resolve(data);
          } else {
            reject([]);
          }
        })
      });
    },
    //处理谷歌返回的数据
    dealCbData (data) {
      let arr = []
      for (let i = 0; i < data.length; i++) {
        let obj = { ...data[i] }
        obj.label = data[i].name
        obj.value = data[i].name + data[i].formatted_address
        arr.push(obj)
      }
      return arr
    },
  }
}

在父组件中引用 并使用：
script:

import googleCom from '@/components/map/googlemap'
 components: {

    googleCom
  },

template: