From 1f96f089eb3546c682313d29513be04ac72e2de5 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 31 十月 2023 16:21:08 +0800
Subject: [PATCH] Merge branch 'master' of ssh://114.215.109.124:29418/grid-management-vue
---
src/components/map/MapSearch.vue | 221 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 221 insertions(+), 0 deletions(-)
diff --git a/src/components/map/MapSearch.vue b/src/components/map/MapSearch.vue
new file mode 100644
index 0000000..909e355
--- /dev/null
+++ b/src/components/map/MapSearch.vue
@@ -0,0 +1,221 @@
+<template>
+ <el-dialog v-model="dialogShow" width="70%" destroy-on-close>
+ <template #header>
+ <div> 鍧愭爣鎷惧彇</div>
+ </template>
+ <div class="fy-tip-red">宸﹂敭鐐瑰嚮鍦板浘閫夊彇鍧愭爣鐐癸紝鎴栬�呮牴鎹叧閿瓧鎼滅储鍦扮偣</div>
+ <el-row>
+ <el-col :span="10">
+ <el-form
+ :inline="true"
+ label-width="50px"
+ label-position="left"
+ :model="formObj"
+ ref="formRef"
+ destroy-on-close
+ >
+ <el-form-item label="鍦板潃" prop="address">
+ <el-input
+ v-model="formObj.address"
+ placeholder="璇疯緭鍏ュ湴鍧�鎼滅储"
+ ></el-input>
+ </el-form-item>
+ <!-- <el-form-item label="缁忓害" prop="lon">
+ <el-input
+ v-model="formObj.lon"
+ style="width: 100px"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="绾害" prop="lat">
+ <el-input
+ v-model="formObj.lat"
+ style="width: 100px"
+ ></el-input>
+ </el-form-item> -->
+ <el-form-item>
+ <el-button type="primary" @click="searchKeyword"
+ >鎼滅储</el-button
+ >
+ </el-form-item>
+ </el-form>
+ </el-col>
+ <el-col :span="12">
+ <div v-if="searchResult.address">
+ <span>閫夋嫨鍦板潃锛�</span>
+ <span>{{ searchResult.address }}</span>
+ <div>
+ <span>{{
+ searchResult.lon + ', ' + searchResult.lat
+ }}</span>
+ <el-divider direction="vertical" />
+ <span>{{
+ searchResult.gpsLon + ', ' + searchResult.gpsLat
+ }}</span>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="2">
+ <el-button
+ :disabled="searchResult.gpsLon == undefined"
+ type="success"
+ @click="submit"
+ >閫夋嫨</el-button
+ >
+ </el-col>
+ </el-row>
+ <div id="mapContainer"></div>
+ </el-dialog>
+</template>
+
+<script>
+import { shallowRef } from 'vue';
+import AMapLoader from '@amap/amap-jsapi-loader';
+// import { AMap, onMapMounted } from './baseMap';
+import baseMapUtil from './baseMapUtil.js';
+
+// var map;
+var AMap;
+var geocoder;
+var inited = false;
+// onMapMounted(() => {
+// AMap.plugin('AMap.Geocoder', function () {
+// geocoder = new AMap.Geocoder({
+// city: '涓婃捣' // city 鎸囧畾杩涜缂栫爜鏌ヨ鐨勫煄甯傦紝鏀寔浼犲叆鍩庡競鍚嶃�乤dcode 鍜� citycode
+// });
+
+// // 浣跨敤geocoder鍋氬湴鐞�/閫嗗湴鐞嗙紪鐮�
+// });
+// });
+export default {
+ setup() {
+ const map = shallowRef(null);
+ return {
+ map
+ };
+ },
+ props: {
+ show: Boolean
+ },
+ data() {
+ return {
+ dialogShow: false,
+ formObj: {},
+ searchResult: {}
+ };
+ },
+ emits: ['update:show', 'onSubmit'],
+ watch: {
+ show(val) {
+ this.dialogShow = val;
+ },
+ dialogShow(val) {
+ if (val) {
+ this.mapInit();
+ } else {
+ this.formObj = {};
+ this.searchResult = {};
+ this.map.destroy();
+ }
+ this.$emit('update:show', val);
+ }
+ },
+ methods: {
+ mapInit() {
+ // if (!inited) {
+ AMapLoader.load({
+ key: 'c55f27799afbfa69dc5a3fad90cafe51', // 鐢宠濂界殑Web绔紑鍙戣�匥ey锛岄娆¤皟鐢� load 鏃跺繀濉�
+ version: '2.0', // 鎸囧畾瑕佸姞杞界殑 JS API 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
+ plugins: ['AMap.Geocoder'] // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
+ }).then((_AMap) => {
+ AMap = _AMap;
+ this.map = new AMap.Map('mapContainer', {
+ rotateEnable: true,
+ pitchEnable: true,
+ alwaysRender: false,
+ showLabel: true,
+ showBuildingBlock: true,
+ // mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
+ // features: ['bg', 'road'],
+ pitch: 0, // 鍦板浘淇话瑙掑害锛屾湁鏁堣寖鍥� 0 搴�- 83 搴�
+ viewMode: '2D', // 鍦板浘妯″紡
+ resizeEnable: true,
+ center: [121.6039283, 31.25295567],
+ zooms: [3, 18],
+ zoom: 14
+ });
+ geocoder = new AMap.Geocoder({
+ city: '涓婃捣' // city 鎸囧畾杩涜缂栫爜鏌ヨ鐨勫煄甯傦紝鏀寔浼犲叆鍩庡競鍚嶃�乤dcode 鍜� citycode
+ });
+ this.map.on('click', (ev) => {
+ // this.formObj.lon = ev.lnglat.getLng();
+ // this.formObj.lat = ev.lnglat.getLat();
+ this.map.clearMap();
+ const marker = new AMap.Marker({
+ position: ev.lnglat
+ });
+ this.map.add(marker);
+
+ geocoder.getAddress(ev.lnglat, (status, result) => {
+ if (status === 'complete' && result.info === 'OK') {
+ this.searchResult.address =
+ result.regeocode.formattedAddress;
+ this.searchResult.lon = ev.lnglat.getLng();
+ this.searchResult.lat = ev.lnglat.getLat();
+ const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84(
+ this.searchResult.lon,
+ this.searchResult.lat
+ );
+ this.searchResult.gpsLon = gpsLon;
+ this.searchResult.gpsLat = gpsLat;
+ }
+ });
+ });
+ });
+ // inited = true;
+ // }
+ },
+ searchKeyword() {
+ const keyWord = this.formObj.address;
+ this.map.clearMap();
+ geocoder.getLocation(keyWord, (status, result) => {
+ if (status === 'complete' && result.info === 'OK') {
+ const geocode = result.geocodes[0];
+ this.searchResult.address = geocode.formattedAddress;
+
+ this.searchResult.lon = geocode.location.getLng();
+ this.searchResult.lat = geocode.location.getLat();
+ const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84(
+ this.searchResult.lon,
+ this.searchResult.lat
+ );
+ this.searchResult.gpsLon = gpsLon;
+ this.searchResult.gpsLat = gpsLat;
+
+ const marker = new AMap.Marker({
+ position: geocode.location
+ });
+ this.map.add(marker);
+ this.map.setFitView(marker);
+ }
+ });
+ },
+ submit() {
+ this.$emit('onSubmit', this.searchResult);
+ this.dialogShow = false;
+ }
+ }
+ // updated() {
+ // this.mapInit();
+ // }
+};
+</script>
+<style>
+#mapContainer {
+ position: relative;
+ width: 100%;
+ height: 60vh;
+ z-index: 0px;
+ border-radius: var(--el-border-radius-round);
+ box-shadow: var(--el-box-shadow);
+}
+</style>
--
Gitblit v1.9.3