在Vue中使用谷歌地图与vue-google-maps实现地图搜索、地图显示、坐标拾取及定位等功能_vue2-google-maps

Google Maps 提供了个强大的 API 集用于构建地图并与地图交互、可视化位置数据以及通过自动完成进行搜索。vue-google-maps已针对 Vue.js 2 进行了更新,为 Vue.js 应用程序提供了利用这些 API 的工具。它带有一套完善的组件,用于与谷歌地图交互以及双向数据绑定。

首先,您需要安装vue2-google-maps:

npm install vue2-google-maps@0.10.7

在代码编辑器中打开src/main.js，导入vue2-google-maps并使用您的 API 密钥实例化插件: src/main.js 

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
import App from './App.vue'
 
Vue.config.productionTip = false
 
Vue.use(VueGoogleMaps, {
  load: {
    key: '您的实际 API 密钥',
    libraries: 'places',
  }
});
 
new Vue({
  render: h => h(App),
}).$mount('#app')

构建地图搜索组件

<GmapAutocomplete @place_changed="setPlace" :placeholder='$t("googlemap.placeholder")' />
<button class="add-btn cursor" @click="addMarker">{{ $t("allCable.search") }}</button>

 构建地图画布组件：

<GmapMap
          @click="clickMap"
          :center="center"
          :zoom="zoom"
          style="width: 100%; height: 400px"
        >
          <GmapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            @click="clickMarker(m.position)"
          />
        </GmapMap>

 完整代码（功能包含地图搜索，点击地图拾取坐标，获取当前定位）：

<template>
  <div class="map">
    <el-row
      style="display: flex; justify-content: center; padding-bottom: 7vh"
      class=""
    >
      <el-col :xs="20" :sm="20" :md="16" :lg="15" :xl="14" style="">
        <div class="search-box">
          <h2 style="margin-bottom: 10px">
            {{ $t("googlemap.searchAndAdd") }}
          </h2>
          <GmapAutocomplete @place_changed="setPlace" :placeholder='$t("googlemap.placeholder")' />
          <button class="add-btn cursor" @click="addMarker">
            {{ $t("allCable.search") }}
          </button>
        </div>
        <br />
        <div class="GmapMapBox">
        <GmapMap
          @click="clickMap"
          :center="center"
          :zoom="zoom"
          style="width: 100%; height: 400px"
        >
          <GmapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            @click="clickMarker(m.position)"
          />
        </GmapMap>
        </div>
 
        <el-row style="" class="btn-box">
          <el-button type="primary" @click="submitMap">{{
            $t("form.sure")
          }}</el-button>
          <el-button @click="cancelMap">{{ $t("form.cancel") }}</el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  name: "GoogleMap",
  data() {
    return {
      center: { lat: 10.0, lng: 10.0 }, // 中心位置
      center_: { lat: 10.0, lng: 10.0 }, // 保存当前点位置
      currentPlace: null,
      markers: [],
      places: [],
      placeName: "",
      dialogVisible: true,
      googlemap: "",
      hasSetPin:false,
      icon:require("@/assets/img/loading.gif"),
      zoom:1
    };
  },
  props:['gpsName'],
  mounted() {
    if(this.gpsName!='Positioning'){
      let gpsArr = this.gpsName.split(',')
      if(gpsArr&&gpsArr.length>0){
        this.zoom = 10
        this.center.lat = gpsArr[0]*1
        this.center.lng = gpsArr[1]*1
        this.center_.lat = gpsArr[0]*1
        this.center_.lng = gpsArr[1]*1
        this.markers.push({ position: this.center_ });
      }
      this.hasSetPin = true
    } else {
      this.geolocate();
    }
  },
  methods: {
    handleClose() {},
    setPlace(place) {
      this.currentPlace = place;
      this.addMarkerFun();
    },
    addMarker() {
      this.addMarkerFun();
    },
    addMarkerFun(){
      if (this.currentPlace) {
        this.hasSetPin = true
        this.zoom = 10
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng(),
        };
        this.markers = [];
        this.markers.push({ position: marker });
        this.places.push(this.currentPlace);
        this.center = marker;
        this.center_ = marker;
        this.placeName = this.currentPlace.name;
        this.currentPlace = null;
      }
    },
    geolocate: function () {
      let vm = this
     
      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition((position) => {
          if(position && position.coords && position.coords.latitude){
            // alert("获取地理位置："+position.coords.latitude+","+position.coords.longitude)
            vm.hasSetPin = true
            vm.zoom = 10
            vm.center = {
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            };
            vm.center_ = vm.center
            vm.markers.push({ position: vm.center });
          }          
        },(error)=>{  // html5 默认调用的谷歌的接口，会有安全限制
          switch(error.code)  
          {
            case error.PERMISSION_DENIED: // 许可拒绝,用户选了不允许
            // alert("您拒绝对获取地理位置的请求");
            // alert(error.message);
            break;  
            case error.POSITION_UNAVAILABLE: // 连不上GPS卫星，或者网络断了
            // alert("位置信息是不可用的");
            // alert(error.message);
            break;  
            case error.TIMEOUT:  // /超时了
            // alert("请求您的地理位置超时");
            // alert(error.message);
            break;
            case error.UNKNOWN_ERROR:
            // alert("未知错误");
            // alert(error.message);
            break;
          }
        });
      } else {
        // alert("navigator.geolocation未获取获取到地理位置");
        // vm.markers.push({ position: vm.center });
      }
    },
    clickMap(e) {
      this.hasSetPin = true
      let longlat = e.latLng.lat() + "," + e.latLng.lng();
      this.center_ = {
        lat: e.latLng.lat(),
        lng: e.latLng.lng(),
      };
      this.markers = [];
      this.markers.push({ position: this.center_ });
    },
    clickMarker(val) {
      this.center = val;
    },
    submitMap() {
      if(!this.hasSetPin){
        this.msgError(this.$t("googlemap.searchAndAdd"));
        return
      }
      let obj = Object.assign({}, this.center_);
      obj.name = `${this.center_.lat.toFixed(5)},${this.center_.lng.toFixed(5)}`;
      this.$emit("setMap", obj);
    },
    cancelMap() {
      this.$emit("closeMap");
    },
  },
};
</script>
<style scoped>
.map {
  /* height: 85vh; */
  padding-top: 10vh;
}
.add-btn {
  width: 60px;
  margin-left: 2%;
  height: 40px;
  background: #409eff;
  color: #fff;
  border: 0;
  border-radius: 5px;
}
.search-box input {
  height: 40px;
  width: 50%;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding-left: 7px;
  outline: none;
}
/* 底部两个按钮 */
.btn-box {
  margin-top: 2vh;
}
.btn-box .el-button {
  padding: 8px 30px;
  border-radius: 30px;
  width: 140px;
  height: 40px;
}
.confirm {
  color: #fff;
  background-color: #0778bc;
}
.cancel {
  color: #0778bc;
  border: 1px solid #0778bc;
}
.cursor {
  cursor: pointer;
}
@media only screen and (max-width: 820px) {
  .img-box .el-image {
    height: 4vh;
  }
  .search-box input {
    height: 5vh;
  }
  .add-btn {
    height: 5vh;
  }
}
.map .GmapMapBox{
  background-image: url(../assets/img/loading.gif);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}
</style>