first commit
This commit is contained in:
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div style="position: relative !important">
|
||||
<div style="margin-bottom: 10px">
|
||||
<el-autocomplete
|
||||
v-model="addressValue"
|
||||
style="width: 100%"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="请输入关键词查询地址"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</div>
|
||||
<div id="mapContainer"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let marker = null
|
||||
let circle = null
|
||||
module.exports = {
|
||||
name: "mapContainer",
|
||||
props: {
|
||||
isCircle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
radius: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
position: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
view: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
|
||||
map: null,
|
||||
poi: this.position,
|
||||
appMapCenterPointX: 0,
|
||||
appMapCenterPointY: 0,
|
||||
addressValue: "",
|
||||
placeSearchComponent: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelect(item) {
|
||||
if (item.location) {
|
||||
// 定位到中心点
|
||||
this.map.setCenter(item.location)
|
||||
// TODO 获取数据，对数据进行操作如：添加marker等
|
||||
this.clearMarker()
|
||||
this.createMarker(item.location)
|
||||
this.poi = [item.location.lng, item.location.lat]
|
||||
}
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
if (!queryString) {
|
||||
return
|
||||
}
|
||||
this.placeSearchComponent.search(queryString, function (status, result) {
|
||||
// 查询成功时，result即对应匹配的POI信息
|
||||
if (status !== "error") {
|
||||
result.poiList.pois.forEach((item) => {
|
||||
item.value = item.name + "【详细地址：" + item.address + "】"
|
||||
})
|
||||
cb(result.poiList.pois)
|
||||
}
|
||||
})
|
||||
},
|
||||
initMap() {
|
||||
this.map = new AMap.Map("mapContainer", {
|
||||
// 设置地图容器id
|
||||
resizeEnable: true,
|
||||
zoom: 16, // 初始化地图级别
|
||||
center: [this.appMapCenterPointX, this.appMapCenterPointY] // 初始化地图中心点位置
|
||||
})
|
||||
console.log(this.map)
|
||||
this.placeSearchComponent = new AMap.PlaceSearch({
|
||||
// city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
|
||||
city: ""
|
||||
})
|
||||
this.clearMarker()
|
||||
if (this.poi && this.poi.length > 0) {
|
||||
const coordinateArray = this.poi
|
||||
this.createMarker(coordinateArray)
|
||||
} else {
|
||||
this.createMarker([this.appMapCenterPointX, this.appMapCenterPointY])
|
||||
}
|
||||
this.map.on("click", (e) => {
|
||||
if (!this.view) {
|
||||
this.clearMarker()
|
||||
const position = [e.lnglat.getLng(), e.lnglat.getLat()]
|
||||
this.createMarker(position)
|
||||
this.poi = position
|
||||
}
|
||||
})
|
||||
},
|
||||
// 清楚签到点位
|
||||
clearMarker() {
|
||||
if (marker) {
|
||||
this.map.remove(marker)
|
||||
}
|
||||
if (circle && this.isCircle) {
|
||||
this.map.remove(circle)
|
||||
}
|
||||
},
|
||||
// 创建签到点位
|
||||
createMarker(position) {
|
||||
if (this.isCircle) {
|
||||
circle = new AMap.Circle({
|
||||
center: new AMap.LngLat(position[0], position[1]), // 圆心位置
|
||||
radius: this.radius, // 半径
|
||||
strokeColor: "#F33", // 线颜色
|
||||
strokeOpacity: 1, // 线透明度
|
||||
strokeWeight: 1, // 线粗细度
|
||||
fillColor: "#ee2200", // 填充颜色
|
||||
fillOpacity: 0.35 // 填充透明度
|
||||
})
|
||||
this.map.add(circle)
|
||||
this.getAddress(position)
|
||||
this.map.setFitView()
|
||||
}
|
||||
marker = new AMap.Marker({
|
||||
position: position,
|
||||
offset: new AMap.Pixel(0, 0)
|
||||
})
|
||||
this.map.add(marker)
|
||||
this.getAddress(position)
|
||||
this.map.setFitView(null, false, [150, 60, 100, 60])
|
||||
},
|
||||
getAddress() {},
|
||||
async getConfigKey(key) {
|
||||
const resp = await this.$axios.post("/open/common/getConfigKey", { key })
|
||||
return resp.data
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
position(newVal) {
|
||||
this.poi = newVal
|
||||
},
|
||||
poi(newVal) {
|
||||
this.$emit("update:position", newVal)
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// DOM初始化完成进行地图初始化
|
||||
this.$nextTick(async () => {
|
||||
this.appMapCenterPointX = await this.getConfigKey("AppMapCenterPointX")
|
||||
this.appMapCenterPointY = await this.getConfigKey("AppMapCenterPointY")
|
||||
this.initMap()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#mapContainer {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div style="position: relative !important">
|
||||
<div style="margin-bottom: 10px">
|
||||
<el-autocomplete
|
||||
v-model="addressValue"
|
||||
style="width: 100%"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="请输入关键词查询地址"
|
||||
@select="handleSelect"
|
||||
:trigger-on-focus="false"
|
||||
/>
|
||||
</div>
|
||||
<div id="mapContainer"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "TMap",
|
||||
props: {
|
||||
radius: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
position: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
view: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
poi: this.position,
|
||||
appMapCenterPointX: 0,
|
||||
appMapCenterPointY: 0,
|
||||
markerLayer: null,
|
||||
addressValue: '',
|
||||
circle: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelect(item) {
|
||||
if (item.location) {
|
||||
// 定位到中心点
|
||||
const center = new TMap.LatLng(item.location.lat, item.location.lng)
|
||||
this.map.setCenter(center)
|
||||
this.clearMarker()
|
||||
this.createMarker(center)
|
||||
this.poi = [item.location.lat, item.location.lng]
|
||||
}
|
||||
},
|
||||
async querySearchAsync(queryString, cb) {
|
||||
if (!queryString) {
|
||||
return
|
||||
}
|
||||
const res = await this.$axios.post("/platform/TMap/suggestion", {
|
||||
keyword: queryString,
|
||||
})
|
||||
if (res.code === 0 && res.data.status === 0) {
|
||||
res.data.data.forEach((item) => {
|
||||
item.value = item.title + "【详细地址：" + item.address + "】"
|
||||
})
|
||||
cb(res.data.data)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
cb([])
|
||||
}
|
||||
},
|
||||
initMap() {
|
||||
const center = new TMap.LatLng(this.appMapCenterPointY, this.appMapCenterPointX)
|
||||
this.map = new TMap.Map('mapContainer', {
|
||||
resizeEnable: true,
|
||||
zoom: 16,
|
||||
center: center
|
||||
})
|
||||
// 初始化
|
||||
this.markerLayer = new TMap.MultiMarker({
|
||||
map: this.map,
|
||||
geometries: []
|
||||
});
|
||||
if (this.poi && this.poi.length > 0) {
|
||||
const posi = new TMap.LatLng(this.poi[0], this.poi[1])
|
||||
this.createMarker(posi)
|
||||
this.map.setCenter(posi)
|
||||
} else {
|
||||
this.createMarker(center)
|
||||
}
|
||||
this.map.on("click", (event) => {
|
||||
if (!this.view) {
|
||||
this.clearMarker()
|
||||
this.createMarker(event.latLng)
|
||||
this.poi = [event.latLng.getLat(), event.latLng.getLng()]
|
||||
}
|
||||
})
|
||||
},
|
||||
// 清除签到点位
|
||||
clearMarker() {
|
||||
if (this.markerLayer) {
|
||||
this.markerLayer.setGeometries([])
|
||||
}
|
||||
if(this.circle) {
|
||||
this.circle.setGeometries([])
|
||||
}
|
||||
},
|
||||
// 创建签到点位
|
||||
createMarker(position) {
|
||||
this.markerLayer.add([
|
||||
{
|
||||
id: 'marker_' + Date.now(),
|
||||
position: position
|
||||
}
|
||||
]);
|
||||
this.circle = new TMap.MultiCircle({
|
||||
map: this.map,
|
||||
geometries: [{
|
||||
center: position,
|
||||
radius: this.radius,
|
||||
}],
|
||||
});
|
||||
},
|
||||
async getConfigKey(key) {
|
||||
const resp = await this.$axios.post("/open/common/getConfigKey", { key })
|
||||
return resp.data
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
position(newVal) {
|
||||
this.poi = newVal
|
||||
},
|
||||
poi(newVal) {
|
||||
this.$emit("update:position", newVal)
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// DOM初始化完成进行地图初始化
|
||||
this.$nextTick(async () => {
|
||||
this.appMapCenterPointX = await this.getConfigKey("AppMapCenterPointX")
|
||||
this.appMapCenterPointY = await this.getConfigKey("AppMapCenterPointY")
|
||||
this.initMap()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#mapContainer {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user