autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-06-11 10:49:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

更改地图选择多个点击多个点标记地区选择问题

Browse Source
This commit is contained in:
BOOL\25024
2023-08-04 13:37:59 +08:00
parent 182ee5db2f
commit 1dca4365d8
2 changed files with 588 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
jsowell-ui/src/components/MapContainer/MapContainer.vue
View File

@@ -11,14 +11,12 @@
></el-input> ></el-input>
<el-button style="width: 85px" type="primary" @click="send" <el-button style="width: 85px" type="primary" @click="send"
>搜索 >搜索
</el-button </el-button>
>
</div> </div>
<div id="container"></div> <div id="container"></div>
</div> </div>
<!-- <div class="img">--> <!-- <div class="img">-->
<!-- <el-input--> <!-- <el-input-->
<!-- placeholder="请选择图片"--> <!-- placeholder="请选择图片"-->
@@ -43,10 +41,10 @@ window._AMapSecurityConfig = {
securityJsCode: "b6b6e07309486e524f9986e1f36a5e28", securityJsCode: "b6b6e07309486e524f9986e1f36a5e28",
}; };
export default { export default {
props:['stationLat','stationLng'], props: ["stationLat", "stationLng"],
data() { data() {
return { return {
dialogImageUrl: '', dialogImageUrl: "",
dialogVisible: false, dialogVisible: false,
// headers:{ // headers:{
// Authorization:this.$store.state.user.token // Authorization:this.$store.state.user.token
@@ -65,7 +63,6 @@ export default {
placeSearch: "", placeSearch: "",
stationId: this.$route.params.id, stationId: this.$route.params.id,
avatar: "", avatar: "",
}; };
}, },
methods: { methods: {
@@ -84,13 +81,23 @@ export default {
// this.initMap(this.lat, this.lng); // this.initMap(this.lat, this.lng);
// }); // });
// }, // },
handleSearchResultClick(data) {
// 在这里处理点击事件
// console.log(data); // 你可以在控制台打印点击结果的数据
let lat = data.entr_location.lat;
let lng = data.entr_location.lng;
this.getLngLatService(lat, lng);
},
initMap() { initMap() {
// console.log(lat, lng); // console.log(lat, lng);
AMapLoader.load({ AMapLoader.load({
key: "ba9123dd736bce40f30b52f7c0beebc1", // 申请好的Web端开发者Key，首次调用 load 时必填 key: "ba9123dd736bce40f30b52f7c0beebc1", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 plugins: [
"AMap.AutoComplete",
"AMap.PlaceSearch",
"AMap.Geocoder",
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}) })
.then((AMap) => { .then((AMap) => {
this.map = new AMap.Map("container", { this.map = new AMap.Map("container", {
@@ -105,7 +112,10 @@ export default {
this.map.setDefaultCursor("pointer"); this.map.setDefaultCursor("pointer");
// 点标记 // 点标记
let marker = new AMap.Marker({ let marker = new AMap.Marker({
position: new AMap.LngLat(+this.stationLng, +this.stationLat), position: new AMap.LngLat(
+this.stationLng,
+this.stationLat
),
}); });
// 将创建的点标记添加到已有的地图实例 // 将创建的点标记添加到已有的地图实例
this.map.add(marker); this.map.add(marker);
@@ -117,6 +127,11 @@ export default {
this.placeSearch = new AMap.PlaceSearch({ this.placeSearch = new AMap.PlaceSearch({
map: this.map, map: this.map,
}); });
// 点击搜索结果的回调函数
this.placeSearch.on("markerClick", (e) => {
// 在此处处理点击事件
this.handleSearchResultClick(e.data);
});
// 逆向地理编码 -> 要正向地理编码 // 逆向地理编码 -> 要正向地理编码
this.map.on("click", (e) => { this.map.on("click", (e) => {
let lat = e.lnglat.lat; let lat = e.lnglat.lat;
@@ -134,7 +149,6 @@ export default {
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
}); });
}, },
select(e) { select(e) {
this.placeSearch.search(e.poi.name); //关键字查询查询 this.placeSearch.search(e.poi.name); //关键字查询查询

82
jsowell-ui/src/views/pile/station/pileList.vue
View File

@@ -18,8 +18,19 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 切换运营商按钮 --> <!-- 切换运营商按钮 -->
@@ -70,7 +81,11 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="运营商" align="center" prop="merchantName" /> <el-table-column
label="运营商"
align="center"
prop="merchantName"
/>
<el-table-column label="充电站" align="center" prop="stationName" /> <el-table-column label="充电站" align="center" prop="stationName" />
<el-table-column <el-table-column
label="注册时间" label="注册时间"
@@ -88,12 +103,21 @@
/> />
<!-- 修改充电桩站点 --> <!-- 修改充电桩站点 -->
<el-dialog :title="title" :visible.sync="open" width="45%" append-to-body> <el-dialog
:title="title"
:visible.sync="open"
width="45%"
append-to-body
:before-close="handleClose"
>
<el-form ref="form" :model="updateData" label-width="120px"> <el-form ref="form" :model="updateData" label-width="120px">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="已选择的桩"> <el-form-item label="已选择的桩">
<el-tag v-for="tag in updateData.pileSnList" :key="tag"> <el-tag
v-for="tag in updateData.pileSnList"
:key="tag"
>
{{ tag }} {{ tag }}
</el-tag> </el-tag>
</el-form-item> </el-form-item>
@@ -105,7 +129,9 @@
<el-select <el-select
v-model="updateData.merchantId" v-model="updateData.merchantId"
placeholder="请选择运营商" placeholder="请选择运营商"
@change="changeSelectMerchant(updateData.merchantId)" @change="
changeSelectMerchant(updateData.merchantId)
"
> >
<el-option <el-option
v-for="item in merchantList" v-for="item in merchantList"
@@ -136,7 +162,9 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="产品型号" prop="modelId"> <el-form-item label="产品型号" prop="modelId">
<el-select v-model="updateData.modelId" placeholder="请选择产品型号" <el-select
v-model="updateData.modelId"
placeholder="请选择产品型号"
v-selectLoadMore="selectLoadMore" v-selectLoadMore="selectLoadMore"
:remote-method="remoteMethod" :remote-method="remoteMethod"
> >
@@ -218,9 +246,9 @@ export default {
modelTotal: 0, modelTotal: 0,
loadMoreFlag: true, loadMoreFlag: true,
searchModelParam: { searchModelParam: {
name: '', name: "",
pageNo: 1, pageNo: 1,
pageSize: 10 pageSize: 10,
}, },
}; };
}, },
@@ -230,26 +258,27 @@ export default {
methods: { methods: {
// 下拉加载更多 // 下拉加载更多
selectLoadMore() { selectLoadMore() {
console.log("触底了 ", this.searchModelParam.pageSize) console.log("触底了 ", this.searchModelParam.pageSize);
if (this.loadMoreFlag === false) { if (this.loadMoreFlag === false) {
return; return;
} }
this.searchModelParam.pageSize = this.searchModelParam.pageSize + 10; this.searchModelParam.pageSize =
console.log('触底了执行查询', this.searchModelParam); this.searchModelParam.pageSize + 10;
console.log("触底了执行查询", this.searchModelParam);
this.getModelList(); this.getModelList();
}, },
// 远程搜索 // 远程搜索
remoteMethod(val) { remoteMethod(val) {
console.log('输入了', val) console.log("输入了", val);
this.loading = true this.loading = true;
this.search.name = val this.search.name = val;
this.search.start = 1 this.search.start = 1;
this.list= [] this.list = [];
setTimeout(() => { setTimeout(() => {
this.loading = false this.loading = false;
this.getModelList() this.getModelList();
}, 500) }, 500);
}, },
// 分页查询 // 分页查询
@@ -258,7 +287,8 @@ export default {
console.log("分页查询response", response); console.log("分页查询response", response);
this.modelTotal = response.total; this.modelTotal = response.total;
this.modelList = response.rows; this.modelList = response.rows;
this.loadMoreFlag = this.searchModelParam.pageSize <= this.modelTotal; this.loadMoreFlag =
this.searchModelParam.pageSize <= this.modelTotal;
}); });
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
@@ -269,7 +299,7 @@ export default {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.queryParams = { this.queryParams = {
pageNum: 1 pageNum: 1,
}; };
// this.resetForm("queryForm"); // this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
@@ -322,6 +352,13 @@ export default {
cancel() { cancel() {
this.open = false; this.open = false;
this.reset(); this.reset();
this.stationList = [];
},
// 点击弹框右上角×
handleClose() {
this.open = false;
this.reset();
this.stationList = [];
}, },
reset() { reset() {
this.updateData.merchantId = null; this.updateData.merchantId = null;
@@ -353,6 +390,7 @@ export default {
}); });
this.open = false; this.open = false;
this.getPileList(); this.getPileList();
this.stationList = [];
}) })
.catch((error) => { .catch((error) => {
this.loading = false; this.loading = false;