<template><div class="map"><div class="mapLeftStyle"><el-inputv-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: {//地图idmapID: {type: String,default: () => {return "googleMap";},},//谷歌地图样式googleMapStyle: {type: Object,default: () => {return {wdith: "100%",height: "100vh",};},},//谷歌地图配置mapOptions: {type: Object,default: () => {return {//为了关闭默认控件集,设置地图的disableDefaultUI的属性为truedisableDefaultUI: false,// 启用缩放和平移gestureHandling: "greedy",panControl: true,zoomControl: true,scaleControl: true,//关闭街景streetViewControl: false,};},},//谷歌地图缩放级别zoom: {type: Number,default() {return 15;},},//谷歌地图图形pathmapPath: {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, //之前的keyversion: "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=ensearchBox = new google.maps.places.AutocompleteService();// 搜索地点和检索地点详细信息 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=enservice = new google.maps.places.PlacesService(map);// 对请求进行地理编码 参考文档：https://developers.google.com/maps/documentation/javascript/reference/geocoder?hl=engeocoder = 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>