parent
07c135f75e
commit
a8581d9c4c
@ -1,156 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- // 使用的是抽屉弹出 -->
|
|
||||||
<div
|
|
||||||
:wrapperClosable="false"
|
|
||||||
size="40%"
|
|
||||||
title="位置选择"
|
|
||||||
:visible.sync="showStatus"
|
|
||||||
direction="rtl"
|
|
||||||
width="600px">
|
|
||||||
<!-- // 搜索的表单 -->
|
|
||||||
<el-form style="margin-left: 20px" class="searchForm" size="small" :model="searchFrom">
|
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-col :span="10">
|
|
||||||
<el-form-item prop="name">
|
|
||||||
<el-input clearable placeholder="请输入搜索位置信息"
|
|
||||||
v-model="searchFrom.name"
|
|
||||||
name="name"/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-button icon="el-icon-search" type="primary" size="mini"
|
|
||||||
@click="searchAddress">搜索位置
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
|
||||||
<!-- // 地图显示 注意id必须要加。因为下面会指定id加载地图 -->
|
|
||||||
<div id="mapContainer" style="width:100%;height:300px;"></div>
|
|
||||||
<!-- // 附近地点显示 -->
|
|
||||||
<el-table
|
|
||||||
highlight-current-row
|
|
||||||
:data="nearPointList"
|
|
||||||
max-height="300"
|
|
||||||
style="width: 100%">
|
|
||||||
<el-table-column
|
|
||||||
prop="name"
|
|
||||||
label="附近地点名称">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
fixed="right"
|
|
||||||
label="操作"
|
|
||||||
width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button
|
|
||||||
@click.native.prevent="selectAddress(scope.row)"
|
|
||||||
type="text"
|
|
||||||
size="small">
|
|
||||||
确认选择
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
// 引入qqmap
|
|
||||||
import maps from 'qqmap'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "mapSelect",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
rootAddress: '',
|
|
||||||
searchFrom: {name: ''},
|
|
||||||
nearPointList: [],
|
|
||||||
showStatus: false,
|
|
||||||
map: '',
|
|
||||||
data: '',
|
|
||||||
markersArray: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// 初始化地图
|
|
||||||
this.initMap()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 搜索地址
|
|
||||||
searchAddress() {
|
|
||||||
if (!this.searchFrom.name) {
|
|
||||||
this.$message.error('未输入搜索内容')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.setLocationByAddress(this.rootAddress + ',' + this.searchFrom.name)
|
|
||||||
},
|
|
||||||
// 初始化地图
|
|
||||||
initMap() {
|
|
||||||
let that = this
|
|
||||||
maps.init('4TWBZ-2XDO4-G27U2-D5MK4-GS5F6-Y2F5H', () => {
|
|
||||||
let latLon = new qq.maps.LatLng(26.326248944008693, 116.35539315640926)
|
|
||||||
let myOpts = {
|
|
||||||
zoom: 14,
|
|
||||||
center: latLon,
|
|
||||||
mapTypeId: qq.maps.MapTypeId.ROADMAP
|
|
||||||
}
|
|
||||||
that.map = new qq.maps.Map(
|
|
||||||
document.getElementById('mapContainer'),
|
|
||||||
myOpts
|
|
||||||
)
|
|
||||||
qq.maps.event.addListener(that.map, 'click', function (event) {
|
|
||||||
that.setLocationByLatLng(event.latLng.getLat(), event.latLng.getLng())
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// 经纬度解析类回调函数
|
|
||||||
that.geocoder = new qq.maps.Geocoder({
|
|
||||||
complete: function (result) {
|
|
||||||
that.nearPointList = result.detail.nearPois
|
|
||||||
that.map.setCenter(result.detail.location);
|
|
||||||
let marker = new qq.maps.Marker({
|
|
||||||
map: that.map,
|
|
||||||
position: result.detail.location
|
|
||||||
});
|
|
||||||
that.markersArray.push(marker);
|
|
||||||
if (that.markersArray.length > 1) {
|
|
||||||
for (let i = 0; i < that.markersArray.length - 1; i++) {
|
|
||||||
that.markersArray[i].setMap(null);// 清除标记
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 地址解析回调函数
|
|
||||||
that.geocoderLocation = new qq.maps.Geocoder({
|
|
||||||
complete: function (result) {
|
|
||||||
// 查找附近的点
|
|
||||||
let latLng = new qq.maps.LatLng(result.detail.location.lat, result.detail.location.lng);
|
|
||||||
that.geocoder.getAddress(latLng);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 选择地址时间
|
|
||||||
selectAddress(row) {
|
|
||||||
this.$emit("on-select", this.rootAddress, row.name, row.latLng.lat, row.latLng.lng)
|
|
||||||
this.showStatus = false
|
|
||||||
},
|
|
||||||
// 父组件调用显示抽屉的方法
|
|
||||||
show() {
|
|
||||||
this.initMap()
|
|
||||||
this.showStatus = true
|
|
||||||
},
|
|
||||||
// 父组件设置初始显示 省市区数据
|
|
||||||
setLocationByAddress(address) {
|
|
||||||
this.rootAddress = address
|
|
||||||
this.geocoderLocation.getLocation(address);
|
|
||||||
},
|
|
||||||
// 父组件设置初始显示 经纬度数据
|
|
||||||
setLocationByLatLng(lat, lng) {
|
|
||||||
let latLng = new qq.maps.LatLng(lat, lng);
|
|
||||||
this.geocoder.getAddress(latLng);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue