<template>
<div class="container-multimap">
<div class="searchBox">
<div style="display: flex; margin-bottom: 10px">
<el-input v-model="input" placeholder="请输入位置关键字"></el-input>
<el-button type="primary" @click="searchPlace">搜索</el-button>
<el-button @click="clearMarkers" type="success">清空</el-button>
</div>
<div class="adressBox" v-if="adressList.length">
<div v-for="(item, index) in adressList" :key="index" @click="chooseAdress(item, index)">
<span class="el-icon-location" style="font-size: 16px; color: #409eff; margin-right: 10px">
</span>
<span :class="[item.isChoose === true ? 'check' : '']">{{
item.title
}}</span>
</div>
<div class="confirmBtn">
<el-button @click="confirmAdd" type="success">确定</el-button>
</div>
</div>
</div>
<div id="mapContainer" style="width: 100%; height:55vh;"></div>
</div>
</template>
<script>
import { getRandomAvatar } from "@/api/robot/manage.js"
export default {
name: 'Map',
props: {
markersArray: {
type: Array,
default: []
}
},
data() {
return {
map: null,
markers: [], // 存储所有的标记点
searchQuery: '',// 搜索查询
placeSearch: null,
geocoder: null,
input: '',
adressList: [],
searchMarkers: []
};
},
mounted() {
this.initMap();
},
watch: {},
methods: {
initMap() {
// 初始化地图
//定义map变量,调用 TMap.Map() 构造函数创建地图
this.map = new TMap.Map(document.getElementById('mapContainer'), {
center: [30.221391, 120.264777],//设置地图中心点坐标
zoom: 14, //设置地图缩放级别
});
this.geocoder = new TMap.service.Geocoder()
// 监听地图的点击事件
this.map.on('click', this.addMarker);
},
async addMarker(event) {
let position = ''
let markerAddress = ''
// 获取点击的位置
position = [event.latLng.lng, event.latLng.lat];
if (event.poi) {
markerAddress = event.poi.name
} else {
const res = await this.getAddress(event)
console.log(res)
markerAddress = res.result.address
}
// 生成唯一的ID
const id = Date.now();
// 创建一个新的标记点
let marker = null
marker = new TMap.MultiMarker({
id: id,
map: this.map,
styles: {
"marker": new TMap.MarkerStyle({
"width": 35,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": process.env.VUE_APP_BASE_URL + '/pics/icon/location-full.png'
})
},
geometries: [{
"id": 'demo',
"styleId": 'marker',
"position": event.latLng,
"properties": {
"title": "marker"
}
}]
});
// 将标记点存储到 markers 数组中
const [lng, lat] = position
const { data: { avatar, name, gender } } = await getRandomAvatar()
this.markers.push({ id, marker, lng, lat, markerAddress, avatar, name, gender });
this.$emit('update:markersArray', this.markers)
},
getAddress(event) {
return new Promise((resolve, reject) => {
this.geocoder.getAddress({ location: event.latLng }).then(res => {
resolve(res)
})
})
},
searchPlace() {
const suggest = new TMap.service.Suggestion({
pageSize: 10, // 返回结果每页条目数
regionFix: false, // 搜索无结果时是否固定在当前城市
servicesk: "", // key
});
suggest
.getSuggestions({
keyword: this.input,
servicesk: "", // 签名(可在腾讯地图开放平台中拿)
})
.then((result) => {
this.adressList = result.data;
this.adressList.forEach((item) => {
item.isChoose = false;
});
});
},
clearMarkers() {
this.markers.forEach(m => {
m.marker.setMap(null);
});
this.markers = [];
this.$emit('update:markersArray', this.markers)
},
handlerMarker(id) {
this.markers.forEach(m => {
if (m.id == id) {
m.marker.setMap(null)
}
});
this.markers = this.markers.filter(m => m.id !== id);
this.$emit('update:markersArray', this.markers)
},
chooseAdress(data, index) {
this.chooseItem = data;
// 取消之前选中的地址样式
this.adressList.forEach((item, i) => {
if (i !== index) {
item.isChoose = false;
}
});
// 设置当前选中的地址样式
this.adressList[index].isChoose = true;
this.$forceUpdate();
this.reserMap(data.location.lat, data.location.lng, 15);
},
//地图显示
reserMap(lat, lng, zoom) {
this.searchMarkers.forEach(m => {
m.marker.setMap(null);
});
const center = new TMap.LatLng(lat, lng);
this.map.setCenter(center)
this.map.setZoom(16)
const marker = new TMap.MultiMarker({
map: this.map,
styles: {
"marker": new TMap.MarkerStyle({
"width": 35,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": process.env.VUE_APP_BASE_URL + '/pics/icon/location-full.png'
})
},
geometries: [{
"id": 'demo',
"styleId": 'marker',
"position": center,
"properties": {
"title": "marker"
}
}]
});
this.searchMarkers.push({ marker: marker })
},
confirmAdd() {
this.searchMarkers.forEach(m => {
m.marker.setMap(null);
});
this.adressList = []
this.input = ''
this.handlerAddMarker(this.chooseItem)
},
async handlerAddMarker(position) {
let markerAddress = position.title
// 生成唯一的ID
const id = Date.now();
// 创建一个新的标记点
let marker = null
marker = new TMap.MultiMarker({
id: id,
map: this.map,
styles: {
"marker": new TMap.MarkerStyle({
"width": 35,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": process.env.VUE_APP_BASE_URL + '/pics/icon/location-full.png'
})
},
geometries: [{
"id": 'demo',
"styleId": 'marker',
"position": position.location,
"properties": {
"title": "marker"
}
}]
});
// 将标记点存储到 markers 数组中
const { lng, lat } = position.location
const { data: { avatar, name, gender } } = await getRandomAvatar()
this.markers.push({ id, marker, lng, lat, markerAddress, avatar, name, gender });
this.$emit('update:markersArray', this.markers)
}
}
};
</script>
<style>
#mapContainer {
width: 400px;
height: 200px;
}
.searchBox {
position: absolute;
top: -50px;
right: 20px;
z-index: 9999;
}
.custom-content-marker {
z-index: 1;
position: relative;
width: 40px;
height: 50px;
}
.custom-content-marker img {
position: absolute;
top: -50px;
left: -20px;
width: 100%;
height: 100%;
}
.custom-content-marker .close-btn {
position: absolute;
top: -106px;
right: -10px;
width: 15px;
height: 15px;
font-size: 12px;
background: #ccc;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}
.custom-content-marker .close-btn:hover {
background: #666;
}
.txt-content {
position: absolute;
top: -100px;
right: 0;
color: #fff;
padding: 4px;
box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #25a5f7;
border-radius: 3px;
}
.adressBox {
width: 100%;
height: 200px;
overflow: auto;
border: 1px solid #c5c5c5;
background-color: #fff;
border-radius: 6px;
margin-bottom: 20px;
}
.adressBox div {
font-size: 16px;
padding-left: 14px;
line-height: 38px;
border-bottom: 1px solid #eee;
}
.adressBox div:hover {
background: #e1e1e1;
cursor: pointer;
}
.confirmBtn {
position: absolute;
bottom: -12px;
right: 0;
}
.check {
font-size: 18px;
font-weight: 600;
color: #409eff;
}
</style>
vue2腾讯地图选择多个点
最新推荐文章于 2024-08-20 11:29:48 发布