|
@@ -16,7 +16,8 @@
|
|
|
</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)">
|
|
|
+ <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>
|
|
@@ -30,7 +31,9 @@
|
|
|
<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 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>
|
|
@@ -44,7 +47,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
@@ -52,20 +55,20 @@ export default {
|
|
|
type: String,
|
|
|
default: () => {
|
|
|
return '';
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
latAndLong: {//经纬度
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [];
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
visible: {
|
|
|
type: Boolean,
|
|
|
default: () => {
|
|
|
return false;
|
|
|
- },
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -94,16 +97,16 @@ export default {
|
|
|
async visible(n) {
|
|
|
this.mapPop = n;
|
|
|
if (n) {
|
|
|
- await this.initMap()
|
|
|
+ await this.initMap();
|
|
|
this.location = this.address;
|
|
|
- this.handleInput(0)
|
|
|
+ this.handleInput(0);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
destroyed() {
|
|
|
if (this.map) {
|
|
|
- this.map.destroy()
|
|
|
- this.map.off('rightclick')
|
|
|
+ this.map.destroy();
|
|
|
+ this.map.off('rightclick');
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -111,8 +114,8 @@ export default {
|
|
|
if (!this.location) return;
|
|
|
|
|
|
if (!flag) {//搜索
|
|
|
- this.total = 0
|
|
|
- this.pageNum = 1
|
|
|
+ this.total = 0;
|
|
|
+ this.pageNum = 1;
|
|
|
}
|
|
|
|
|
|
const that = this;
|
|
@@ -121,15 +124,15 @@ export default {
|
|
|
pageSize: 10, // 每页条数,默认10,范围1-50
|
|
|
pageIndex: 1, // 页码
|
|
|
extensions: 'all' // 默认base,返回基本地址信息;all:返回详细信息
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
this.searchPop = true;
|
|
|
- this.placeSearch.setPageIndex(this.pageNum)
|
|
|
+ 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 = []
|
|
|
+ let arr = [];
|
|
|
const pois = result.poiList.pois;
|
|
|
that.total = result.poiList ? result.poiList.count : 0;
|
|
|
arr = pois.map((item) => {
|
|
@@ -138,46 +141,46 @@ export default {
|
|
|
address: item.address,
|
|
|
img: item.photos[0]?.url,
|
|
|
lnglat: [item.location.lng, item.location.lat]
|
|
|
- }
|
|
|
- })
|
|
|
- that.searchList = arr
|
|
|
+ };
|
|
|
+ });
|
|
|
+ that.searchList = arr;
|
|
|
|
|
|
} else {
|
|
|
- that.total = 0
|
|
|
- that.searchList = []
|
|
|
+ that.total = 0;
|
|
|
+ that.searchList = [];
|
|
|
}
|
|
|
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
handleChangePage(newNum) {
|
|
|
if (!this.searchPop) return;
|
|
|
- this.pageNum = newNum
|
|
|
- this.handleInput(1)
|
|
|
+ this.pageNum = newNum;
|
|
|
+ this.handleInput(1);
|
|
|
},
|
|
|
closeSearchList() {
|
|
|
- this.searchPop = false
|
|
|
- this.location = ''
|
|
|
- this.searchList = []
|
|
|
- this.total = 0
|
|
|
- this.pageNum = 1
|
|
|
+ this.searchPop = false;
|
|
|
+ this.location = '';
|
|
|
+ this.searchList = [];
|
|
|
+ this.total = 0;
|
|
|
+ this.pageNum = 1;
|
|
|
},
|
|
|
// 地图中心的平移至指定点位置
|
|
|
handlePanTo(index) {
|
|
|
- let lnglat = this.searchList[index].lnglat
|
|
|
+ let lnglat = this.searchList[index].lnglat;
|
|
|
this.form = {
|
|
|
longitude: lnglat[0],
|
|
|
latitude: lnglat[1]
|
|
|
- }
|
|
|
- this.map.panTo(lnglat)
|
|
|
+ };
|
|
|
+ this.map.panTo(lnglat);
|
|
|
this.setMarks(lnglat);
|
|
|
- this.closeSearchList()
|
|
|
+ this.closeSearchList();
|
|
|
},
|
|
|
async initMap() {
|
|
|
let position = this.latAndLong.length ? this.latAndLong : [110.925175, 21.678955];
|
|
|
this.form = {
|
|
|
longitude: position[0],
|
|
|
latitude: position[1]
|
|
|
- }
|
|
|
+ };
|
|
|
window._AMapSecurityConfig = {
|
|
|
securityJsCode: '4868bc1b8fac7d9e54e7279ed556879a'
|
|
|
};
|
|
@@ -185,21 +188,21 @@ export default {
|
|
|
key: '9c5041381e5e824f9ee324d8f7a40150', // 申请好的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.amap = AMap;
|
|
|
|
|
|
this.setMarks(position);
|
|
|
this.geocoder = new AMap.Geocoder({
|
|
|
// city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
|
|
|
city: '010'
|
|
|
- })
|
|
|
+ });
|
|
|
// 创建右键菜单
|
|
|
- this.ContextMenu()
|
|
|
+ this.ContextMenu();
|
|
|
this.map.on('rightclick', this.handleRightclick);
|
|
|
|
|
|
},
|
|
@@ -209,11 +212,11 @@ export default {
|
|
|
this.form = {
|
|
|
longitude: this.lnglatPosition[0],
|
|
|
latitude: this.lnglatPosition[1]
|
|
|
- }
|
|
|
- this.contextMenu.close()
|
|
|
+ };
|
|
|
+ this.contextMenu.close();
|
|
|
let lnglat = [this.form.longitude, this.form.latitude];
|
|
|
this.setMarks(lnglat);
|
|
|
- }, 1)
|
|
|
+ }, 1);
|
|
|
},
|
|
|
// 右键事件
|
|
|
handleRightclick(e) {
|
|
@@ -226,9 +229,9 @@ export default {
|
|
|
this.geocoder.getAddress(lnglat, (status, result) => {
|
|
|
if (status === 'complete' && result.info === 'OK') {
|
|
|
// result为对应的地理位置详细信息
|
|
|
- this.$emit("confirm", { lnglat: lnglat, address: result.regeocode.formattedAddress });
|
|
|
+ this.$emit('confirm', { lnglat: lnglat, address: result.regeocode.formattedAddress });
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
setMarks(lnglat) {//添加标记
|
|
|
if (this.marker) this.map.remove(this.marker);
|
|
@@ -237,7 +240,7 @@ export default {
|
|
|
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",
|
|
|
+ image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
|
|
|
}),
|
|
|
anchor: 'bottom-center',
|
|
|
offset: new AMap.Pixel(0, 0)
|
|
@@ -246,7 +249,7 @@ export default {
|
|
|
this.marker = marker;
|
|
|
},
|
|
|
handleClose() {
|
|
|
- this.$emit('update:visible', false)
|
|
|
+ this.$emit('update:visible', false);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -260,10 +263,12 @@ export default {
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
+
|
|
|
.map {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.search {
|
|
|
width: 50%;
|
|
|
position: absolute;
|
|
@@ -274,6 +279,7 @@ export default {
|
|
|
border-radius: 3px;
|
|
|
display: flex;
|
|
|
}
|
|
|
+
|
|
|
.btn {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
@@ -288,6 +294,7 @@ export default {
|
|
|
top: 70px;
|
|
|
padding: 15px;
|
|
|
border-radius: 3px;
|
|
|
+
|
|
|
.close {
|
|
|
position: absolute;
|
|
|
right: 2%;
|
|
@@ -296,6 +303,7 @@ export default {
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.scroll {
|
|
|
width: 100%;
|
|
|
max-height: 250px;
|
|
@@ -317,18 +325,16 @@ export default {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
- &::v-deep {
|
|
|
- .image-slot {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #f5f7fa;
|
|
|
- text-align: center;
|
|
|
- line-height: 50px;
|
|
|
- }
|
|
|
+ :deep(.image-slot) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
|
|
|
- .el-icon-picture-outline {
|
|
|
- font-size: 25px;
|
|
|
- }
|
|
|
+ :deep(.el-icon-picture-outline) {
|
|
|
+ font-size: 25px;
|
|
|
}
|
|
|
|
|
|
.text {
|
|
@@ -337,15 +343,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-::v-deep {
|
|
|
- .el-scrollbar__wrap {
|
|
|
- overflow-x: hidden !important;
|
|
|
- }
|
|
|
-
|
|
|
- .is-horizontal {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+:deep(.el-scrollbar__wrap) {
|
|
|
+ overflow-x: hidden !important;
|
|
|
+}
|
|
|
+:deep(.is-horizontal) {
|
|
|
+ display: none;
|
|
|
}
|
|
|
+
|
|
|
.empty {
|
|
|
margin: 20px 0;
|
|
|
}
|