vue2中加载谷歌地图googleMaps，vue2-google-maps，若依，地图画圈，多个标记

官方文档：

developers.google.cn/maps/docume…

1、安装

npm install vue2-google-maps

2、main.js引入

import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
    load: {
        key: '你的谷歌的key',
        libraries: '3.26'
    }
})

3、代码

<template>
 <GmapMap :zoom="13" map-type-id="terrain" :center="center" style="width:100%;  height: 700px;" :draggable="true" @dragend="handleDragEnd" @center_changed="handleDragMap">
        <GmapMarker :draggable="false" @drag="updateCoordinates" :key="index" v-for="(m, index) in locationMarkers" :position="m.position" @click="center=m.position" />
        <GmapCircle :draggable="false" :center="center" :radius="circleRadius" :options="circleOptions" />
      </GmapMap>
</template>
<script>
import { gmapApi } from 'vue2-google-maps'
export default {
  name: "AddGoogleMap",
  data() {
    return {
      circleRadius: 1000, // 圆的半径，单位为米
      //圆的样式
      circleOptions: {
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        strokeColor: '#007acc',
        strokeOpacity: 0.3,
        strokeWeight: 2
      },
      place: '',
      center: {
        lat: 22.294288333822724,
        lng: 114.17236658840172
      },
      locationMarkers: [{
        position: { lat: 22.294288333822724, lng: 114.17236658840172 }
      }, {
        position: { lat: 22.2871383653748, lng: 114.16228928981894 }
      }, {
        position: { lat: 22.29791586849338, lng: 114.17214627975227 }
      }],
      locPlaces: [],
      existingPlace: null,
    };
  },
  computed: {
    google: gmapApi, //引入Google Maps API。
  },
  mounted() {
    this.locateGeoLocation();
    this.list = this.cities.map(item => {
      return { value: `${item.value}`, label: `${item.label}` };
    });
  },
  methods: {
  // 用于根据输入的位置搜索地点并在地图上显示标记
    searchLocation() {
      console.log(this.place, '此地点经纬度')
      console.log(this.checkboxGroup1, '热门商圈')
      console.log(this.checkboxGroup2, '标签')
      var geocoder = new this.google.maps.Geocoder();
      geocoder.geocode({ 'address': this.place }, (results, status) => {
        if (status === 'OK') {
          // this.currentLocation.lat = results[0].geometry.location.lat();
          // this.currentLocation.lng = results[0].geometry.location.lng();
          console.log('/////////////////////////////')
          console.log(results, 'results')
          console.log(results[0].geometry.location.lat());
          console.log(results[0].geometry.location.lng());
          console.log('/////////////////////////////');

          const marker = {
            lat: results[0].geometry.location.lat(),
            lng: results[0].geometry.location.lng()
          };

          // const firstResult = results[0];
          // const location = firstResult.geometry.location;
          // const marker = {
          //   lat: location.lat(),
          //   lng: location.lng()
          // };

          this.locationMarkers = [{ position: marker }];
          this.center = marker;

        } else {
          console.log('搜索失败');
        }
      });
    },
    // 当地图拖动结束时，更新标记的位置并将地图中心设置为标记位置
    handleDragMap(lo) {
      console.log('dragend map')
      const marker = {
        lat: lo.lat(),
        lng: lo.lng()
      };
      // this.locationMarkers = [{ position: marker }]; // 默认红标是否随着屏幕移动
      console.log(marker, 'change center')
    },
    // 当标记被拖动结束时，更新地图中心为标记的位置
    handleDragEnd() {
      this.center = this.locationMarkers[0].position
    },
    // 在指定位置添加标记，并更新地图中心为标记的位置
    initMarker(loc) {
      // console.log(loc.geometry.location.lng())
      // this.existingPlace = loc;
      if (loc) {
        console.log(loc, 'loc')
        const marker = {
          lat: loc.geometry.location.lat(),
          lng: loc.geometry.location.lng()
        };
        this.locationMarkers.push({ position: marker });
        this.center = marker;
        this.locPlaces.push(loc);
      }
    },
    // 更新标记的位置并将地图中心设置为标记位置
    updateCoordinates(location) {
      if (location) {
        const marker = {
          lat: location.latLng.lat(),
          lng: location.latLng.lng()
        };
        this.locationMarkers = [{ position: marker }];
        this.locPlaces.push(location);
        this.center = marker;
      }
      // console.log('lat',location.latLng.lat())
      // console.log('lng', location.latLng.lng())
    },
    // 添加一个已存在的地点标记到地图上，并更新地图中心为标记的位置
    addLocationMarker() {
      if (this.existingPlace) {
        const marker = {
          lat: this.existingPlace.geometry.location.lat(),
          lng: this.existingPlace.geometry.location.lng()
        };
        this.locationMarkers.push({ position: marker });
        this.locPlaces.push(this.existingPlace);
        this.center = marker;
        this.existingPlace = null;
      }
    },
    // 获取用户的地理位置，并在地图上显示用户的位置标记
    locateGeoLocation: function () {
      navigator.geolocation.getCurrentPosition(res => {
        const marker = {
          lat: res.coords.latitude,
          lng: res.coords.longitude
        };
        this.center = marker
        this.locationMarkers = [{ position: marker }];
      });
    },
  }