vue使用谷歌地图实现地点查询

效果


代码
首先在index.html中引入谷歌地图资源

 <script src="https://maps.googleapis.com/maps/api/js?key='你的api密钥'&libraries=places">
  script>
1
2

页面中

<template>
  <div class="pac-card div-style" id="pac-card">
    <div id="map" class="flex-item1"></div>

    <div id="pac-container" class="flex-item2">
      <el-input
        v-model="localValue"
        ref="autocompleteInput"
        type="text"
        placeholder="输入地址"
        @input="handleInput"
      />
      <ul
        v-if="predictions.length != 0 && localValue != ''"
        class="autocomplete-list"
      >
        <li
          style="list-style: none"
          v-for="prediction in predictions"
          :key="prediction.place_id"
          @click="selectPrediction(prediction)"
        >
          {{ prediction.description }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "addressMap",
  data() {
    return {
      localValue: "",
      map: "",
      marker: "",
      longitude: -73.98633,
      latitude: 40.749933,
      predictions: [], // 存储搜索框提示的预测结果
    };
  },
  methods: {
    selectPrediction(prediction) {
      this.localValue = prediction.description;
      this.predictions = [];
      const that = this;
      // 创建 PlacesService 对象
      const placesService = new google.maps.places.PlacesService(map);
      // 获取地点的 Place ID
      const placeId = prediction.place_id;
      // 发起 Places API 请求
      placesService.getDetails({ placeId: placeId }, function (place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          // 获取地点的经纬度坐标
          that.latitude = place.geometry.location.lat();
          that.longitude = place.geometry.location.lng();
          that.initMap();
        } else {
          alert("无法找到该地点！");
        }
      });
    },
    handleInput() {
      const autocompleteService = new google.maps.places.AutocompleteService();
      autocompleteService.getPlacePredictions(
        { input: this.localValue },
        (predictions, status) => {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            this.predictions = predictions;
          } else {
            this.predictions = [];
          }
        }
      );
    },
    initMap() {
      const map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: this.latitude, lng: this.longitude },
        zoom: 13,
        mapTypeControl: false,
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
#map {
  overflow: hidden;
  width: 300px;
  height: 400px;
  margin: 0;
}
.div-style {
  display: flex;
}
.flex-item1 {
  flex: 2;
}
.flex-item2 {
  flex: 1;
}
.autocomplete-list {
  height: 200px;
  overflow: auto;
  ul {
    li {
      margin: 10px 0;
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118