当前位置:   article > 正文

vue 使用谷歌地图 @googlemaps/js-api-loader 进行模糊搜索

vue 使用谷歌地图 @googlemaps/js-api-loader 进行模糊搜索

在这里插入图片描述

<template>
  <div class="map">
    <div class="mapLeftStyle">
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="controls"
        @input="chnageinput"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div class="card" v-if="list.length > 0">
        <!-- <i class="el-icon-location fl mgr10" style="margin-top: 10px"></i> -->
        <div class="item" v-for="(item, index) in list" :key="index">
          <div @click="confirm(item)">
            <div class="title">{{ item.structured_formatting.main_text }}</div>
            <div class="address">
              {{ item.structured_formatting.secondary_text }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mapStyle">
      <div class="mapRightStyle">
        <div :style="googleMapStyle" class="googleMap" :id="mapID"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { Loader } from "@googlemaps/js-api-loader"; //引入
// 输入框模糊查询
let searchBox = undefined;
// 搜索地点和检索地点详细信息
let service = undefined;
// 对请求进行地理编码
let geocoder = undefined;
let marker = undefined;
export default {
  props: {
    //地图id
    mapID: {
      type: String,
      default: () => {
        return "googleMap";
      },
    },
    //谷歌地图样式
    googleMapStyle: {
      type: Object,
      default: () => {
        return {
          wdith: "100%",
          height: "100vh",
        };
      },
    },
    //谷歌地图配置
    mapOptions: {
      type: Object,
      default: () => {
        return {
          //为了关闭默认控件集,设置地图的disableDefaultUI的属性为true
          disableDefaultUI: false,
          // 启用缩放和平移
          gestureHandling: "greedy",
          panControl: true,
          zoomControl: true,
          scaleControl: true,
          //关闭街景
          streetViewControl: false,
        };
      },
    },
    //谷歌地图缩放级别
    zoom: {
      type: Number,
      default() {
        return 15;
      },
    },
    //谷歌地图图形path
    mapPath: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      map: {},
      BMap: {},
      input: "",
      googleMapCenter: {
        lng: "",
        lat: "",
      },
      //标记点
      marker: [],
      //图形实例
      graphicalExample: null,
      //图形路径经纬度
      graphicalPath: [],
      apiKey: "",
      // 模糊匹配数据
      list: [],
    };
  },
  created() {

  },
  mounted() {
    //通过浏览器的Geolocation API获取经纬度
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.showPosition);
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
    this.init();
  },
  methods: {
    showPosition(position) {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      console.log("Latitude: " + latitude);
      console.log("Longitude: " + longitude);
      this.googleMapCenter = {
        lng: longitude,
        lat: latitude,
      };
      this.init();
    },
    init() {
      this.$nextTick(() => {
        const loader = new Loader({
          apiKey: this.apiKey, //之前的key
          version: "weekly", //版本
          libraries: ["places", "drawing"], //插件库places为基础库 drawing为绘制工具库
          region: "Canada",
          language: "en",
        });
        const mapOptions = {
          center: {
            lat: this.googleMapCenter.lat * 1,
            lng: this.googleMapCenter.lng * 1,
          }, //中心点
          zoom: this.zoom, //缩放级别
          ...this.mapOptions, //其他配置
        };
        loader
          .load()
          .then((google) => {
            const map = new google.maps.Map(
              document.getElementById(this.mapID),
              mapOptions
            );
            this.googleMap = map;
            this.googleApi = google;
            // 自动完成请求 参考文档:https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service?hl=en
            searchBox = new google.maps.places.AutocompleteService();
            // 搜索地点和检索地点详细信息 参考文档:https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=en
            service = new google.maps.places.PlacesService(map);
            // 对请求进行地理编码 参考文档:https://developers.google.com/maps/documentation/javascript/reference/geocoder?hl=en
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({
              map: map,
              position: {},
              draggable: true,
            });
            console.log(this.googleMap, "谷歌地图实例");
            console.log(this.googleApi, "谷歌地图api");
          })
          .catch((e) => {
            console.log(e);
          });
      });
    },
    GetMapLocation(results, status) {
      if (status === "OK") {
        console.log(results[0].geometry.location, results[0], results, "查验");
        this.googleMap.setCenter(results[0].geometry.location);
        marker.setPosition(results[0].geometry.location);
      } else {
        console.log("error");
      }
    },
    // 点击一行地址
    confirm(e) {
      // 搜索地点和检索地点详细信息
      service.getDetails({ placeId: e.place_id }, (event, status) => {
        if (status === "OK") {
          console.log(event.name, "===", event);
          this.input = event.name;
          // if (!event.name) return;
          let str = event.name;
          // 对请求进行地理编码
          geocoder.geocode({ address: str }, this.GetMapLocation);
        } else {
        }
      });
    },
    chnageinput(e) {
      console.log(e);
      searchBox.getPlacePredictions({ input: e }, (event, status) => {
        console.log(event, "===");
        if (status === "OK") {
          this.list = event || [];
          // place_id 后面有用,所以只保留存在place_id的数据
          this.list = this.list.filter((x) => x.place_id);
          console.log(event, "===", this.list);
        } else {
          this.list = [];
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner::placeholder {
  font-size: 16px;
  font-family: Hei;
  font-weight: 400;
  color: #000000;
  line-height: 26px;
}
::v-deep .popper__arrow {
  top: 0px !important;
}
::v-deep .el-input__inner {
  border-width: 1px;
  margin-top: 113px;
  position: relative;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #999999;
  border-bottom-width: 2px;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 0px;
}
::v-deep .el-input__icon {
  position: absolute;
  top: 109px;
  left: 382px;
  font-size: 30px;
  color: #292929;
}
.map {
  display: flex;
  .mapLeftStyle {
    width: 450px;
    min-width: 450px;
    min-height: 100vh;
    background: #ffffff;
    .controls {
      padding: 0 30px;
      height: 50px;
    }
    .card {
      padding: 0 30px;
      .item {
        cursor: pointer;
        padding: 20px 0;
        .title {
          font-size: 17px;
          font-family: Hei;
          font-weight: 400;
          color: #000000;
          line-height: 26px;
        }
        .address {
          font-size: 15px;
          font-family: Hei;
          font-weight: 400;
          color: #666666;
          line-height: 26px;
        }
      }
    }
    .mapLeftStyle_line {
      height: 1px;
      border: 1px solid #999999;
      margin: 0px 21px 0px 21px;
    }
  }
  .mapStyle {
    width: 100%;
    .mapLeftStyle {
      // width: 30%;
      margin-right: 5px;
      display: inline-block;
      .inputDUStyle {
        display: inline-block;
        width: 47%;
      }
      .inputDUStyle:first-child {
        margin-right: 1rem;
      }
      .inputDUStyle {
        margin-bottom: 1rem;
      }
    }
    .mapRightStyle {
      width: 100%;
      display: inline-block;
      vertical-align: top;
      .map {
        width: 100%;
        min-height: 100vh;
      }
    }
  }
}
</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
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号