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>