You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
6.9 KiB
235 lines
6.9 KiB
<template>
|
|
<div>
|
|
<div class="map-box2">
|
|
<div class="map" ref="map" style="height: 400px" ></div>
|
|
<div class="map-search2">
|
|
<div>
|
|
<a-input-search id="place" v-model="searchValue" placeholder="请输入详细地址" enter-button @search="searchAddress(searchValue)" />
|
|
</div>
|
|
<div>
|
|
<ul v-if="kwData.length" class="ul2">
|
|
<li class="li2" v-for="(item, index) in kwData" :key="index" @click="selectKeyword(item)">{{ item.address }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'TencentMapPicker',
|
|
props: {
|
|
latitude: {
|
|
type: Number|String,
|
|
default: 0
|
|
},
|
|
longitude: {
|
|
type: Number|String,
|
|
default: 0
|
|
}
|
|
},
|
|
watch: {
|
|
latitude(newVal, oldVal) {
|
|
console.info(`newVal`,newVal,`oldVal`,oldVal)
|
|
if (newVal) {
|
|
this.form.latitude = newVal
|
|
// this.$nextTick(()=>{
|
|
// this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
|
|
// })
|
|
}
|
|
},
|
|
longitude(newVal, oldVal) {
|
|
console.info(`newVal`,newVal,`oldVal`,oldVal)
|
|
if (newVal) {
|
|
this.form.longitude = newVal
|
|
// this.$nextTick(()=>{
|
|
// this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
|
|
// })
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
searchValue: '', //地图搜索
|
|
form: {
|
|
longitude: 116.397128,
|
|
latitude: 39.916527
|
|
},
|
|
kwData:[]
|
|
}
|
|
},
|
|
mounted() {
|
|
let that = this
|
|
if (that.script) return;
|
|
that.script = document.createElement('script');
|
|
that.script.type = 'text/javascript';
|
|
that.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=WPKBZ-OKICI-ZAIGE-U6TQ4-RPQIV-OXBJO`;
|
|
document.head.appendChild(that.script);
|
|
that.script.onload = () => {
|
|
window.initMap = that.initMap;
|
|
that.$nextTick(() => {
|
|
that.initMap();
|
|
});
|
|
};
|
|
},
|
|
methods: {
|
|
// 地图
|
|
initMap() {
|
|
// 搜索类
|
|
this.searchEr = new window.TMap.service.Search({ pageSize: 15 });
|
|
// 地图主类
|
|
this.map = new window.TMap.Map(this.$refs.map, {
|
|
backgroundColor: '#f7f7f7',
|
|
mapStyleId: 'style1',
|
|
zoom: 14,
|
|
mapTypeControlOptions: {
|
|
mapTypeIds: [],
|
|
},
|
|
draggableCursor: 'crosshair',
|
|
center: new window.TMap.LatLng(this.form.latitude, this.form.longitude),
|
|
});
|
|
// 图层类
|
|
this.markerLayer = new window.TMap.MultiMarker({
|
|
map: this.map,
|
|
geometries: [],
|
|
});
|
|
// 地址逆解析
|
|
this.geocoder = new window.TMap.service.Geocoder();
|
|
const setMarker = () => {
|
|
const latlng = new window.TMap.LatLng(this.form.latitude, this.form.longitude);
|
|
this.markerLayer.setGeometries([]);
|
|
let geometries = this.markerLayer.getGeometries();
|
|
geometries.push({
|
|
id: '-1',
|
|
position: latlng,
|
|
});
|
|
this.markerLayer.updateGeometries(geometries);
|
|
};
|
|
this.map.on('click', (e) => {
|
|
this.form.longitude = e.latLng.getLng(); // 经度
|
|
this.form.latitude = e.latLng.getLat(); // 纬度
|
|
|
|
setMarker();
|
|
this.getAddressFormat();
|
|
});
|
|
if (this.form.longitude) {
|
|
this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
|
|
setMarker();
|
|
}
|
|
},
|
|
selectKeyword(event){
|
|
this.map.setCenter(new window.TMap.LatLng(event.location.lat, event.location.lng));
|
|
this.kwData = []
|
|
},
|
|
// 地图搜索
|
|
searchAddress(keyword = '') {
|
|
if (!keyword) return;
|
|
this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', {
|
|
key: 'WPKBZ-OKICI-ZAIGE-U6TQ4-RPQIV-OXBJO',
|
|
output: 'jsonp',
|
|
keyword: keyword,
|
|
}).then((res) => {
|
|
console.log(`res`,res)
|
|
if (res.status === 0) {
|
|
this.kwData = res.data
|
|
} else {
|
|
this.kwData = []
|
|
}
|
|
}).catch((e) => {
|
|
console.log(e)
|
|
})
|
|
this.markerLayer.setGeometries([]);
|
|
this.searchEr.searchRectangle({
|
|
keyword,
|
|
bounds: this.map.getBounds(),
|
|
})
|
|
.then((result) => {
|
|
console.info(`result`,result)
|
|
const { location = {} } = result.data[0] || {};
|
|
const { lat = 39.916527, lng = 116.397128 } = location;
|
|
this.map.setCenter(new window.TMap.LatLng(lat, lng));
|
|
result.data.forEach((item, index) => {
|
|
let geometries = this.markerLayer.getGeometries();
|
|
// 点标注数据数组
|
|
geometries.push({
|
|
id: String(index),
|
|
position: item.location,
|
|
});
|
|
// 绘制地点标注
|
|
this.markerLayer.updateGeometries(geometries);
|
|
});
|
|
});
|
|
},
|
|
getAddressFormat() {
|
|
const { longitude, latitude } = this.form;
|
|
this.geocoder
|
|
.getAddress({
|
|
location: new window.TMap.LatLng(latitude, longitude),
|
|
})
|
|
.then((res) => {
|
|
const {
|
|
formatted_addresses: { recommend = '' },
|
|
} = res.result || {};
|
|
this.searchValue = recommend
|
|
this.form.hotelDetailAddress = recommend;
|
|
this.$emit('onLocationSelected', this.form);
|
|
console.log(this.form);
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.map-box2 {
|
|
position: relative;
|
|
|
|
}
|
|
.map-search2 {
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
width: 300px;
|
|
|
|
}
|
|
|
|
button2 {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.icons {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.time {
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
flex-wrap: wrap;
|
|
height: 70%;
|
|
}
|
|
.ul2{
|
|
background: white;
|
|
list-style-type: none;
|
|
padding-left: 0px;
|
|
height: 280px;
|
|
overflow: scroll;
|
|
}
|
|
.li2{
|
|
padding-left: 6px;
|
|
font-size: 10px;
|
|
text-align: left;
|
|
height: 40px;
|
|
line-height: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.li2:hover{
|
|
cursor: pointer;
|
|
background: #f5f5f5;
|
|
}
|
|
</style>
|