|
|
@@ -0,0 +1,351 @@
|
|
|
+<template>
|
|
|
+ <el-dialog v-model="mapPop" title="地图定位" width="80%" @close="handleClose">
|
|
|
+
|
|
|
+ <div class="map_box">
|
|
|
+ <div class="map" id="map"></div>
|
|
|
+ <div class="search">
|
|
|
+ <!-- @input="handleInput(0)" -->
|
|
|
+ <el-input placeholder="请输入地址" v-model="location" />
|
|
|
+ <el-button class="btn" type="primary" @click="handleInput(0)">搜索</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="scroll_box" v-if="searchPop">
|
|
|
+ <div style="height: 30px; line-height: 30px;">
|
|
|
+ <span style="font-weight:bold">搜索结果列表</span>
|
|
|
+ <i class="el-icon-close" style="float: right;font-size: 20px;cursor: pointer;" @click="closeSearchList()" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-scrollbar class="scroll" style="height: 250px;">
|
|
|
+ <div v-show="searchList.length" class="item" v-for="(item, index) in searchList" :key="index" @click="handlePanTo(index)">
|
|
|
+ <el-image class="img" :src="item.img" :alt="item.name" lazy>
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <i class="el-icon-picture-outline"></i>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ <div>
|
|
|
+ <div class="text">{{ item.name }}</div>
|
|
|
+ <div>{{ item.address }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="empty" v-show="!searchList.length" style="text-align: center;">没有搜索到内容</div>
|
|
|
+ </el-scrollbar>
|
|
|
+
|
|
|
+ <el-pagination background small :hide-on-single-page="true" layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNum" style="margin-top: 10px;" @current-change="handleChangePage">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="handleClose">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="sureMark">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ address: {//公司地址
|
|
|
+ type: String,
|
|
|
+ default: () => {
|
|
|
+ return '';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ latAndLong: {//经纬度
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: () => {
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 地图对象
|
|
|
+ map: {},
|
|
|
+ amap: {},
|
|
|
+ location: '',
|
|
|
+ marker: null,//地图上的点标记
|
|
|
+ contextMenu: null,
|
|
|
+ lnglatPosition: null,//选中的新坐标
|
|
|
+
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+
|
|
|
+ searchList: [],
|
|
|
+ searchPop: false,
|
|
|
+ placeSearch: null,
|
|
|
+ form: {},
|
|
|
+ open: false,
|
|
|
+ mapPop: false,
|
|
|
+ geocoder: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ async visible(n) {
|
|
|
+ this.mapPop = n;
|
|
|
+ if (n) {
|
|
|
+ await this.initMap()
|
|
|
+ this.location = this.address;
|
|
|
+ this.handleInput(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ if (this.map) {
|
|
|
+ this.map.destroy()
|
|
|
+ this.map.off('rightclick')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleInput(flag) {
|
|
|
+ if (!this.location) return;
|
|
|
+
|
|
|
+ if (!flag) {//搜索
|
|
|
+ this.total = 0
|
|
|
+ this.pageNum = 1
|
|
|
+ }
|
|
|
+
|
|
|
+ const that = this;
|
|
|
+ if (!this.placeSearch) {
|
|
|
+ this.placeSearch = new this.amap.PlaceSearch({
|
|
|
+ pageSize: 10, // 每页条数，默认10，范围1-50
|
|
|
+ pageIndex: 1, // 页码
|
|
|
+ extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ this.searchPop = true;
|
|
|
+ this.placeSearch.setPageIndex(this.pageNum)
|
|
|
+ this.placeSearch.search(that.location, (status, result) => {
|
|
|
+ // console.log(result.poiList.pois, 'result')
|
|
|
+ if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
|
|
|
+ let arr = []
|
|
|
+ const pois = result.poiList.pois;
|
|
|
+ that.total = result.poiList ? result.poiList.count : 0;
|
|
|
+ arr = pois.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item.name,
|
|
|
+ address: item.address,
|
|
|
+ img: item.photos[0]?.url,
|
|
|
+ lnglat: [item.location.lng, item.location.lat]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ that.searchList = arr
|
|
|
+
|
|
|
+ } else {
|
|
|
+ that.total = 0
|
|
|
+ that.searchList = []
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleChangePage(newNum) {
|
|
|
+ if (!this.searchPop) return;
|
|
|
+ this.pageNum = newNum
|
|
|
+ this.handleInput(1)
|
|
|
+ },
|
|
|
+ closeSearchList() {
|
|
|
+ this.searchPop = false
|
|
|
+ this.location = ''
|
|
|
+ this.searchList = []
|
|
|
+ this.total = 0
|
|
|
+ this.pageNum = 1
|
|
|
+ },
|
|
|
+ // 地图中心的平移至指定点位置
|
|
|
+ handlePanTo(index) {
|
|
|
+ let lnglat = this.searchList[index].lnglat
|
|
|
+ this.form = {
|
|
|
+ longitude: lnglat[0],
|
|
|
+ latitude: lnglat[1]
|
|
|
+ }
|
|
|
+ this.map.panTo(lnglat)
|
|
|
+ this.setMarks(lnglat);
|
|
|
+ this.closeSearchList()
|
|
|
+ },
|
|
|
+ async initMap() {
|
|
|
+ let position = this.latAndLong.length ? this.latAndLong : [110.93154257997, 21.669064031332];
|
|
|
+ this.form = {
|
|
|
+ longitude: position[0],
|
|
|
+ latitude: position[1]
|
|
|
+ }
|
|
|
+ const AMap = await AMapLoader.load({
|
|
|
+ key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder'] // 插件列表
|
|
|
+ })
|
|
|
+ this.map = new AMap.Map('map', {
|
|
|
+ viewMode: '3D', //是否为3D地图模式
|
|
|
+ center: position,
|
|
|
+ zoom: 15
|
|
|
+ })
|
|
|
+ this.amap = AMap
|
|
|
+
|
|
|
+ this.setMarks(position);
|
|
|
+ this.geocoder = new AMap.Geocoder({
|
|
|
+ // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
+ city: '010'
|
|
|
+ })
|
|
|
+ // 创建右键菜单
|
|
|
+ this.ContextMenu()
|
|
|
+ this.map.on('rightclick', this.handleRightclick);
|
|
|
+
|
|
|
+ },
|
|
|
+ ContextMenu() {
|
|
|
+ this.contextMenu = new AMap.ContextMenu();
|
|
|
+ this.contextMenu.addItem('选择标点', () => {
|
|
|
+ this.form = {
|
|
|
+ longitude: this.lnglatPosition[0],
|
|
|
+ latitude: this.lnglatPosition[1]
|
|
|
+ }
|
|
|
+ this.contextMenu.close()
|
|
|
+ let lnglat = [this.form.longitude, this.form.latitude];
|
|
|
+ this.setMarks(lnglat);
|
|
|
+ }, 1)
|
|
|
+ },
|
|
|
+ // 右键事件
|
|
|
+ handleRightclick(e) {
|
|
|
+ let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
|
|
|
+ this.contextMenu.open(this.map, e.lnglat);
|
|
|
+ this.lnglatPosition = lnglat;
|
|
|
+ },
|
|
|
+ sureMark() {
|
|
|
+ let lnglat = [this.form.longitude, this.form.latitude];
|
|
|
+ this.geocoder.getAddress(lnglat, (status, result) => {
|
|
|
+ if (status === 'complete' && result.info === 'OK') {
|
|
|
+ // result为对应的地理位置详细信息
|
|
|
+ this.$emit("confirm", { lnglat: lnglat, address: result.regeocode.formattedAddress });
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ setMarks(lnglat) {//添加标记
|
|
|
+ if (this.marker) this.map.remove(this.marker);
|
|
|
+ let marker = new AMap.Marker({
|
|
|
+ position: lnglat,
|
|
|
+ icon: new AMap.Icon({
|
|
|
+ size: new AMap.Size(22, 28), //图标所处区域大小
|
|
|
+ imageSize: new AMap.Size(22, 28), //图标大小
|
|
|
+ image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
|
|
+ }),
|
|
|
+ anchor: 'bottom-center',
|
|
|
+ offset: new AMap.Pixel(0, 0)
|
|
|
+ });
|
|
|
+ marker.setMap(this.map);
|
|
|
+ this.marker = marker;
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.$emit('update:visible', false)
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.map_box {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 450px;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.search {
|
|
|
+ width: 50%;
|
|
|
+ position: absolute;
|
|
|
+ right: 2%;
|
|
|
+ top: 10px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 8px 8px;
|
|
|
+ border-radius: 3px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll_box {
|
|
|
+ width: 50%;
|
|
|
+ padding-top: 30px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ right: 2%;
|
|
|
+ top: 70px;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 3px;
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ right: 2%;
|
|
|
+ top: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.scroll {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 250px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 8px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 50px;
|
|
|
+ height: 45px;
|
|
|
+ min-width: 50px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::v-deep {
|
|
|
+ .image-slot {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-picture-outline {
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #3385ff;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep {
|
|
|
+ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .is-horizontal {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+.empty {
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+</style>
|
zhangyihao