From 773e59cdc3571ad0815f286bb8895a3f27a28961 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 01 三月 2024 16:01:23 +0800
Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/~xiaohui/daoAnOffice
---
src/views/daoAnOffice/chartgd copy.vue | 779 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 779 insertions(+), 0 deletions(-)
diff --git a/src/views/daoAnOffice/chartgd copy.vue b/src/views/daoAnOffice/chartgd copy.vue
new file mode 100644
index 0000000..899bf0a
--- /dev/null
+++ b/src/views/daoAnOffice/chartgd copy.vue
@@ -0,0 +1,779 @@
+<template>
+ <div class="home">
+ <div id="map-box"></div>
+ <div style="position: absolute;bottom: 5%;right: 35%;z-index: 999">
+ <div @click="btnlk" class="item-tb">
+ <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
+ <p class="item-tb-p">瀹炴椂璺喌</p>
+ </div>
+ <div @click="toggleTrafic" class="item-tb">
+ <p class="item-tb-p">鍦板浘鍒囨崲</p>
+ <img src="@/assets/img/dtqh.png" alt="" class="item-tb-img">
+ </div>
+
+ </div>
+ <div class="info-box">
+<!-- right鑿滃崟-->
+ <div class="info-div" @click="accidentProneRoadSections">
+ <img src="@/assets/img/sgyfd.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>浜嬫晠鏄撳彂澶氬彂璺</p>
+ <p>78</p>
+ </div>
+ </div>
+ <div class="info-div" @click="keyTouristChannels">
+ <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>閲嶇偣鏃呮父閫氶亾</p>
+ <p>178</p>
+ </div>
+ </div>
+ <div class="info-div">
+ <img src="@/assets/img/djyjq.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>閮芥睙鍫版櫙鍖�</p>
+ <p>278</p>
+ </div>
+ </div>
+ <div class="info-div" @click="policeForceDeployment">
+ <img src="@/assets/img/jlpb.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>璀﹀姏閰嶅</p>
+ <p>348</p>
+ </div>
+ </div>
+ <div class="info-div" @click="fencingConstruction">
+ <img src="@/assets/img/dwsg.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>鎵撳洿鏂藉伐</p>
+ <p>578</p>
+ </div>
+ </div>
+ <div class="info-div">
+ <img src="@/assets/img/jtysqy.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>浜ら�氫簨鏁呮槗鍙戠偣</p>
+ <p>788</p>
+ </div>
+ </div>
+ <div class="info-div" @click="keyTransportationEnterprises">
+ <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>閲嶇偣杩愯緭浼佷笟</p>
+ <p>758</p>
+ </div>
+ </div>
+ <div class="info-div">
+ <img src="@/assets/img/gjxl.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>鍏氦绾胯矾</p>
+ <p>785</p>
+ </div>
+ </div>
+ <div class="info-div">
+ <img src="@/assets/img/aqyh.png" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p>瀹夊叏闅愭偅</p>
+ <p>718</p>
+ </div>
+ </div>
+
+<!-- 鎼滅储-->
+<!-- <el-input-->
+<!-- v-model="keyword"-->
+<!-- placeholder="杈撳叆鍏抽敭瀛楁悳绱�"-->
+<!-- style="width: 300px"-->
+<!-- @change="handleSearch"-->
+<!-- >-->
+<!-- </el-input>-->
+<!-- <div class="ul">-->
+<!-- <div class="li" v-for="item in data" :key="item.id" @click="handleSelect(item)">-->
+<!-- <div class="d-flex flex-column">-->
+<!-- <span style="margin-bottom: 6px">{{item.name}}</span>-->
+<!-- <span>鍦板潃锛歿{item.address}}</span>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </div>-->
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import {shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted} from 'vue';
+import AMapLoader from "@amap/amap-jsapi-loader";
+import {Pointer} from "@element-plus/icons-vue";
+
+const map = shallowRef(null);
+const keyword = ref('');
+const addresstext = ref('')
+const data = ref([]);
+const coord = ref('');
+const adcode = ref('')
+const isVisible = ref(false);
+const trafficLayer = ref(null);
+const vectorLayer = ref(null);
+const isIdent = ref(true);
+const isKeyTour = ref(true);
+const trafficVisible = ref(true);
+let marker = ref(null);
+let AMapObj, placeSearch, geocoder;
+const props = defineProps({
+ form:{}
+})
+
+onMounted(async () => {
+ await initMap()
+ gddt()
+});
+const gddt = () =>{
+
+}
+
+const toggleTrafic = () => {
+ emit('changeDt')
+};
+const fencingConstruction = () => {
+ //鏋勫缓淇℃伅绐椾綋涓樉绀虹殑鍐呭
+ let info = [];
+ info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>xx鍏洯鍋滆溅鍦烘敼寤�</h4>");
+ info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>鏂藉伐鍗曚綅锛歺xxx鍏徃 鏂藉伐鍛ㄦ湡锛�1骞� 寮�濮嬫椂闂达細2024骞�1鏈� 鏈鏂藉伐鍖呮嫭xxxxxxxxxxxxxxxxxxxxxx</p>");
+ const infoWindow = new AMap.InfoWindow({
+ content: info.join("") //浣跨敤榛樿淇℃伅绐椾綋妗嗘牱寮忥紝鏄剧ず淇℃伅鍐呭
+ });
+ //鏋勫缓淇℃伅绐椾綋涓樉绀虹殑鍐呭
+ // marker = new AMap.Marker({
+ // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+ // position: [103.646554,30.989656],
+ // offset: new AMap.Pixel(-13, -30)
+ // });
+ if (isKeyTour.value){
+ // marker.setMap(map.value);
+ if (marker.value) {
+ marker.value.setMap(map.value); // 濡傛灉宸叉湁marker锛岄噸鏂拌缃湴鍥惧疄渚�
+ } else {
+ marker.value = new AMap.Marker({
+ map: map.value,
+ icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
+ position: [103.646233,30.989999],
+ offset: new AMap.Pixel(13, 30),
+
+ });
+ }
+ infoWindow.open(map.value,marker.value.getPosition());
+ isKeyTour.value = false;
+ }else {
+ console.log("娓呴櫎marker")
+ closeInfoWindow()
+ infoWindow.close()
+ marker.value.setMap(null); // 娓呴櫎marker
+ // marker.setMap(null)
+ // marker = null;
+ isKeyTour.value =true
+ }
+
+}
+const policeForceDeployment = () => {
+ //鏋勫缓淇℃伅绐椾綋涓樉绀虹殑鍐呭
+ let info = [];
+ info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>鍦扮偣鍚嶇О</h4>");
+ info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>鍦ㄥ矖璀﹀姏 68 鍦ㄥ矖璀﹁溅 5 澶囧嫟璀﹀姏 23</p>");
+ const infoWindow = new AMap.InfoWindow({
+ content: info.join("") //浣跨敤榛樿淇℃伅绐椾綋妗嗘牱寮忥紝鏄剧ず淇℃伅鍐呭
+ });
+ let startIcon = new AMap.Icon({
+ // 鍥炬爣灏哄
+ size: new AMap.Size(25, 34),
+ // 鍥炬爣鐨勫彇鍥惧湴鍧�
+ image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
+ // 鍥炬爣鎵�鐢ㄥ浘鐗囧ぇ灏�
+ imageSize: new AMap.Size(135, 40),
+ // 鍥炬爣鍙栧浘鍋忕Щ閲�
+ imageOffset: new AMap.Pixel(-9, -3)
+ });
+ //鏋勫缓淇℃伅绐椾綋涓樉绀虹殑鍐呭
+ // marker = new AMap.Marker({
+ // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+ // position: [103.646554,30.989656],
+ // offset: new AMap.Pixel(-13, -30)
+ // });
+ if (isKeyTour.value){
+ // marker.setMap(map.value);
+ if (marker.value) {
+ marker.value.setMap(map.value); // 濡傛灉宸叉湁marker锛岄噸鏂拌缃湴鍥惧疄渚�
+ } else {
+ marker.value = new AMap.Marker({
+ map: map.value,
+ icon: startIcon,
+ position: [103.646044,30.989495],
+ offset: new AMap.Pixel(13, 30)
+ });
+ }
+ infoWindow.open(map.value,marker.value.getPosition());
+ isKeyTour.value = false;
+ }else {
+
+ console.log("娓呴櫎marker")
+ closeInfoWindow()
+ infoWindow.close()
+ marker.value.setMap(null); // 娓呴櫎marker
+ // marker.setMap(null)
+ // marker = null;
+ isKeyTour.value =true
+ }
+
+}
+const keyTouristChannels = () => {
+ //鏋勫缓淇℃伅绐椾綋涓樉绀虹殑鍐呭
+ let info = [];
+ info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>閮芥睙鍫板杩愪腑蹇�</h4>");
+ info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>鏃ョ疮绉汉娴侀噺杈惧埌3000+\n" +
+ "\n" +
+ "xxxxxxxxxxxxxxxx</p>");
+ const infoWindow = new AMap.InfoWindow({
+ content: info.join("") //浣跨敤榛樿淇℃伅绐椾綋妗嗘牱寮忥紝鏄剧ず淇℃伅鍐呭
+ });
+
+ //鏋勫缓淇℃伅绐椾綋涓樉绀虹殑鍐呭
+ // marker = new AMap.Marker({
+ // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+ // position: [103.646554,30.989656],
+ // offset: new AMap.Pixel(-13, -30)
+ // });
+ if (isKeyTour.value){
+ // marker.setMap(map.value);
+ if (marker.value) {
+ marker.value.setMap(map.value); // 濡傛灉宸叉湁marker锛岄噸鏂拌缃湴鍥惧疄渚�
+ } else {
+ marker.value = new AMap.Marker({
+ map: map.value,
+ position: [103.646554,30.989656],
+ offset: new AMap.Pixel(13, 30)
+ });
+ }
+ infoWindow.open(map.value,marker.value.getPosition());
+ isKeyTour.value = false;
+ }else {
+
+ console.log("娓呴櫎marker")
+ closeInfoWindow()
+ infoWindow.close()
+ marker.value.setMap(null); // 娓呴櫎marker
+ // marker.setMap(null)
+ // marker = null;
+ isKeyTour.value =true
+ }
+
+}
+const accidentProneRoadSections = () => {
+ //鏋勫缓淇℃伅绐椾綋涓樉绀虹殑鍐呭
+ let info = [];
+
+ info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>鏂伴┈璺竴娈�</h4>");
+ info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>杩戜笁骞村彂鐢熶氦閫氫簨鏁匵X璧凤紝鍏朵腑閫犳垚浜哄憳浼や骸xx璧凤紝XXXXXXXXXXXXXXXXXXXXX</p>");
+ const infoWindow = new AMap.InfoWindow({
+ content: info.join("") //浣跨敤榛樿淇℃伅绐椾綋妗嗘牱寮忥紝鏄剧ず淇℃伅鍐呭
+ });
+ if(isIdent.value){
+ vectorLayer.value = new AMap.VectorLayer({
+ zIndex: 100,
+ });
+ // 娣诲姞鐭㈤噺鍥惧眰鍒板湴鍥句笂
+ map.value.add(vectorLayer.value);
+ // 娣诲姞璺鏍囨敞
+ const path = [
+ [103.646504,30.989656],
+ [103.647669,30.989409]
+ ];
+ const polyline = new AMap.Polyline({
+ path: path,
+ borderWeight: 5,
+ strokeColor: 'orange',
+ });
+ const markers = new AMap.Marker({
+ icon:'',
+ map: map.value,
+ position: [103.635750,30.983912]
+ });
+
+
+
+
+ infoWindow.open(map.value,[103.646504,30.989656]);
+ // polyline.setMap(map.value);
+
+ // // 娣诲姞璧风偣鍜岀粓鐐规爣娉�
+ // const startMarker = new AMap.Marker({
+ // position: path[0],
+ // map: map.value,
+ // icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+ // anchor: 'bottom-center',
+ // });
+ // const endMarker = new AMap.Marker({
+ // position: path[path.length - 1],
+ // map: map.value,
+ // icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+ // anchor: 'bottom-center',
+ // });
+ vectorLayer.value.add(polyline);
+ // // 灏嗘爣娉ㄧ偣娣诲姞鍒版暟缁勪腑锛岀敤浜庡悗缁搷浣滐紙濡傜偣鍑讳簨浠讹級
+ // markers.value = [startMarker, endMarker];
+ isIdent.value = false
+ }else {
+ isIdent.value = true
+ infoWindow.close()
+ closeInfoWindow()
+ vectorLayer.value.clear(); // 娓呴櫎鐭㈤噺鍥惧眰涓婄殑鎵�鏈夊浘褰�
+ }
+}
+const keyTransportationEnterprises = (callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) => {
+ let endIcon= new AMap.Icon({
+ size: new AMap.Size(25, 34),
+ image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
+ imageSize: new AMap.Size(135, 40),
+ imageOffset: new AMap.Pixel(-95, -3)
+ })
+ const marker = new AMap.Marker({
+ icon:endIcon,
+ map: map.value,
+ position: [103.635750,30.983912]
+ });
+ console.log('閲嶇偣杩愯緭浼佷笟')
+ // 娣诲姞鐐瑰嚮浜嬩欢鎵撳紑淇℃伅绐椾綋
+ // AMap.event.addListener(marker, 'click', () => {
+ // // 鍒涘缓淇℃伅绐椾綋瀹炰緥
+ // const infoWindow = new AMap.InfoWindow({
+ // content: '<div style="width: 200px;">杩欓噷鏄嚜瀹氫箟淇℃伅绐椾綋鍐呭</div>', // 淇℃伅绐椾綋鍐呭
+ // offset: new AMap.Pixel(16, -30)
+ // });
+ //
+ // // 鎵撳紑淇℃伅绐椾綋
+ // infoWindow.open(map.value, [103.635750,30.983912]);
+ // });
+// var marker = new AMap.Marker({
+// icon: "",
+// position: [103.635750,30.983912]
+// });
+// var marker1 = new AMap.Marker({
+// icon: "",
+// position: [103.635750,30.983412]
+// });
+ map.value.add(marker);
+ map.value.setFitView();
+// // 鍒犻櫎宸叉湁Marker瀵硅薄浣跨敤锛�
+// map.value.remove(marker)
+// // 鍙互涓�娆℃�ф坊鍔犲涓狹arker瀹炰緥锛屽彧闇�灏嗘瘡涓狹arker绀轰緥鏀惧叆涓�涓暟缁凙rray涓��
+// // 澶氫釜鐐瑰疄渚嬬粍鎴愮殑鏁扮粍
+// const markerList = [marker, marker1];
+// map.value.add(markerList);
+// // 缁戝畾Marker瀹炰緥鐨勪簨浠�
+//
+// // 缁戝畾浜嬩欢
+ marker.on('click', clickHandler);
+
+};
+function closeInfoWindow() {
+ map.value.clearInfoWindow();
+}
+ //鏋勫缓鑷畾涔変俊鎭獥浣�
+ function createInfoWindow(title, content) {
+ var info = document.createElement("div");
+ info.className = "custom-info input-card content-window-card";
+
+ //鍙互閫氳繃涓嬮潰鐨勬柟寮忎慨鏀硅嚜瀹氫箟绐椾綋鐨勫楂�
+ info.style.width = "400px";
+ // 瀹氫箟椤堕儴鏍囬
+ var top = document.createElement("div");
+ var titleD = document.createElement("div");
+ var closeX = document.createElement("img");
+ top.className = "info-top";
+ titleD.innerHTML = title;
+ closeX.src = "https://webapi.amap.com/images/close2.gif";
+ closeX.onclick = closeInfoWindow;
+
+ top.appendChild(titleD);
+ top.appendChild(closeX);
+ info.appendChild(top);
+
+ // 瀹氫箟涓儴鍐呭
+ var middle = document.createElement("div");
+ middle.className = "info-middle";
+ middle.style.backgroundColor = 'white';
+ middle.innerHTML = content;
+ info.appendChild(middle);
+
+ // 瀹氫箟搴曢儴鍐呭
+ var bottom = document.createElement("div");
+ bottom.className = "info-bottom";
+ bottom.style.position = 'relative';
+ bottom.style.top = '0px';
+ bottom.style.margin = '0 auto';
+ var sharp = document.createElement("img");
+ sharp.src = "https://webapi.amap.com/images/sharp.png";
+ bottom.appendChild(sharp);
+ info.appendChild(bottom);
+ return info;
+}
+const clickHandler = (e)=> {
+ console.log(e)
+ // alert('鎮ㄥ湪[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]鐨勪綅缃偣鍑讳簡鍦板浘锛�');
+ // 鍒涘缓淇℃伅绐椾綋瀹炰緥
+ var title = '姝ｅ崕鐗╂祦',
+ content = [];
+ content.push("姝ｅ崕鐗╂祦涓昏浠庝簨XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
+ content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>");
+ const infoWindow = new AMap.InfoWindow({
+ content: createInfoWindow(title, content.join("<br/>")), // 淇℃伅绐椾綋鍐呭
+ offset: new AMap.Pixel(10, -280)
+ });
+
+ // 鎵撳紑淇℃伅绐椾綋
+ infoWindow.open(map.value, [103.635750,30.983912]);
+};
+const btnlk= ()=>{
+ console.log('瀹炴椂璺喌鍥惧眰',isVisible.value)
+
+ if (isVisible.value){
+ trafficLayer.value.show();
+ isVisible.value = false
+ }else{
+ // map.value.removePlugin('map-box');
+ console.log('闅愯棌瀹炴椂璺喌鍥惧眰',isVisible.value)
+ // map.value.removePlugin('AMap.TruckDriving');
+ trafficLayer.value.hide();
+ isVisible.value = true
+ }
+}
+function initMap(){
+ AMapLoader.load({
+ key: 'f7251c9df6162e94e699f1720f7932c4', //璁剧疆鎮ㄧ殑key
+ version: "2.0",
+ plugins: ['AMap.ToolBar','AMap.Driving'],
+ AMapUI: {
+ version: "1.1",
+ plugins: [],
+
+ },
+ Loca:{
+ version: "2.0.0"
+ },
+ }).then((AMap)=>{
+ // console.log(AMap);
+ AMapObj = AMap;
+ map.value = new AMap.Map("map-box",{
+ viewMode:"3D",
+ zoom:12,
+ zooms:[2,22],
+ center: [103.635750,30.983912],
+ mapStyle: "amap://styles/grey",
+ });
+ // 瀹炰緥鍖朤ileLayer.Traffic瀹炰緥
+ trafficLayer.value = new AMap.TileLayer.Traffic({
+ zIndex: 10, // 璁剧疆璺喌鍥惧眰鐨剒Index
+ showTraffic:true
+ });
+
+ // 灏嗗疄鏃惰矾鍐靛浘灞傛坊鍔犲埌鍦板浘涓�
+ trafficLayer.value.setMap(map.value);
+
+
+
+ map.value.on('click', onMapClick);
+ AMap.plugin(
+ ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch',
+ 'AMap.Geocoder','AMap.AutoComplete'],
+ () => {
+ // 缂╂斁鏉�
+ const toolbar = new AMap.ToolBar();
+ // 姣斾緥灏�
+ const scale = new AMap.Scale();
+ // 瀹氫綅
+ const geolocation = new AMap.Geolocation({
+ enableHighAccuracy: true, // 鏄惁浣跨敤楂樼簿搴﹀畾浣嶏紝榛樿:true
+ timeout: 10000, // 瓒呰繃10绉掑悗鍋滄瀹氫綅锛岄粯璁わ細5s
+ position: 'RT', // 瀹氫綅鎸夐挳鐨勫仠闈犱綅缃�
+ buttonOffset: new AMap.Pixel(10, 20), // 瀹氫綅鎸夐挳涓庤缃殑鍋滈潬浣嶇疆鐨勫亸绉婚噺锛岄粯璁わ細Pixel(10, 20)
+ zoomToAccuracy: true, // 瀹氫綅鎴愬姛鍚庢槸鍚﹁嚜鍔ㄨ皟鏁村湴鍥捐閲庡埌瀹氫綅鐐�
+ });
+ geocoder = new AMap.Geocoder({
+ city: '鍏ㄥ浗',
+ });
+ map.value.addControl(geolocation);
+ map.value.addControl(toolbar);
+ map.value.addControl(scale);
+ placeSearch = new AMap.PlaceSearch({
+ city: '鍏ㄥ浗',
+ pageSize: 10, // 鍗曢〉鏄剧ず缁撴灉鏉℃暟
+ pageIndex: 1, // 椤电爜
+ citylimit: false, // 鏄惁寮哄埗闄愬埗鍦ㄨ缃殑鍩庡競鍐呮悳绱�
+ autoFitView: true,
+ });
+ });
+ if(props.form){
+ keyword.value=props.form.adress
+ handleSearch(props.form.adress)
+ let e={
+ lnglat:{
+ lng:props.form.longitude,
+ lat: props.form.latitude
+ }
+ }
+ onMapClick(e)
+ }
+ }).catch(e=>{
+ console.log(e);
+ })
+}
+
+// 鎼滅储鍦板浘
+function handleSearch(str) {
+ placeSearch.search(str, (status, result) => {
+ if (result && typeof result === 'object' && result.poiList) {
+ const list = result.poiList.pois;
+ list.forEach(item => {
+ item.value = item.name;
+ item.label = item.name;
+ });
+ data.value = list
+ }
+ });
+}
+// 鐐瑰嚮鍦板浘
+function onMapClick(e) {
+ coord.value = e.lnglat.lng + ',' + e.lnglat.lat
+ geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
+ if (status === 'complete' && result.info === 'OK') {
+ // result涓哄搴旂殑鍦扮悊浣嶇疆璇︾粏淇℃伅
+ keyword.value = result.regeocode.formattedAddress
+ addresstext.value = result.regeocode.formattedAddress
+ adcode.value = result.regeocode.addressComponent.adcode.slice(0,4)+'00'
+ }
+ })
+ drawMarker(e.lnglat)
+}
+function onMapadcode (e){
+ geocoder.getAddress([e.location.lng, e.location.lat], function(status, result) {
+ if (status === 'complete' && result.info === 'OK') {
+ // result涓哄搴旂殑鍦扮悊浣嶇疆璇︾粏淇℃伅
+ adcode.value = result.regeocode.addressComponent.adcode.slice(0,4)+'00'
+ }
+ })
+}
+// 鐐瑰嚮鎼滅储椤�
+function handleSelect(item) {
+ drawMarker(item.location)
+ onMapadcode(item)
+ if (item.location != null) {
+ coord.value = item.location.lng + ',' + item.location.lat
+ keyword.value = item.name
+ addresstext.value = item.address
+
+ }
+}
+// 缁樺埗鍦扮偣marker
+function drawMarker(location) {
+ let marker
+ if (location == null) return
+ let longitude = location.lng, latitude = location.lat
+ if (marker) {
+ marker.setMap(null);
+ }
+ marker = new AMapObj.Marker({
+ position: new AMapObj.LngLat(longitude, latitude),
+ anchor: 'bottom-center',
+ });
+ marker.on('click', () => {
+ coord.value = location;
+ })
+ map.value.add(marker);
+ map.value.setZoomAndCenter(16, [longitude, latitude]);
+}
+const emit = defineEmits(['btnAddress','changeDt'])
+function btnsubmit(){
+ emit('btnAddress',coord.value,addresstext.value,adcode.value)
+}
+// initMap();
+</script>
+<style>
+html, body, #container {
+ height: 100%;
+ width: 100%;
+}
+
+.content-window-card {
+ position: relative;
+ box-shadow: none;
+ bottom: 0;
+ left: 0;
+ width: auto;
+ padding: 0;
+}
+
+.content-window-card p {
+ height: 2rem;
+}
+
+.custom-info {
+ border: solid 1px silver;
+}
+
+div.info-top {
+ position: relative;
+ background: none repeat scroll 0 0 #F9F9F9;
+ border-bottom: 1px solid #CCC;
+ border-radius: 5px 5px 0 0;
+}
+
+div.info-top div {
+ display: inline-block;
+ color: #333333;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 31px;
+ padding: 0 10px;
+}
+
+div.info-top img {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ transition-duration: 0.25s;
+}
+
+div.info-top img:hover {
+ box-shadow: 0px 0px 5px #000;
+}
+
+div.info-middle {
+ font-size: 12px;
+ padding: 10px 6px;
+ line-height: 20px;
+}
+
+div.info-bottom {
+ display: none;
+ height: 0px;
+ width: 100%;
+ clear: both;
+ text-align: center;
+}
+
+div.info-bottom img {
+ position: relative;
+ z-index: 104;
+}
+
+span {
+ margin-left: 5px;
+ //font-size: 11px;
+}
+
+.info-middle img {
+ //float: left;
+ height: 100%;
+ width: 100%;
+ margin-right: 6px;
+}
+</style>
+<style lang="scss" scoped>
+
+.home{
+ height: 100%;
+ width: 100%;
+ padding: 0px;
+ margin: 0px;
+ position: relative;
+ .info-div{
+ align-items: center;
+ display: flex;
+ cursor: pointer;
+ margin-top: 0.5rem;
+ //background-color: #4E2749;
+ height: 2.5rem;
+ line-height: 2.5rem;
+ padding-left: 0.5rem;
+ font-family: PingFang SC;
+ font-weight: 800;
+ color: #74A6F2;
+ .item-tb-img{
+ width: 20px;
+ height: 20px;
+ }
+ .info-div-p{
+ flex: 1;
+ margin-left: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ }
+ .info-box {
+ position: absolute;
+ top: 80px;
+ right: 34%;
+ width: 300px;
+ //height: 100%;
+ //background-color: #1f1f1f;
+ opacity: 0.6;
+ background: #11223A;
+ border: 1px solid #29466A;
+ //background-color: #131F3F;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ }
+ .item-tb{
+ cursor: pointer;
+ margin-top: 20px;
+ .item-tb-img{
+ width: 65px;
+ }
+ .item-tb-p{
+ line-height:35px;
+ //background: #00adb5;
+ color:#fff;
+ text-align: center;
+ text-shadow:
+ 0 0 0.1em #4e6ef2, 0 0 0.3em #36f, 3px 3px #4e6ef2, 4px 4px #315efb
+ }
+ }
+}
+.ul{
+ margin-top: 10px;
+ height: 60%;
+ overflow-y: scroll;
+ .li{
+ padding: 5px 10px;
+ background: #FFFFFF;
+ margin-bottom: 10px;
+ min-height: 60px;
+ .d-flex{
+ background: #FFFFFF;
+ color: #1f1f1f;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+}
+
+#map-box{
+ height: calc(100% - 30px);
+ width: 100%;
+ padding: 0px;
+ margin: 0px;
+}
+.btn{
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+</style>
+
+<style scoped >
+:deep() .amap-logo {
+ display: none !important;
+}
+:deep() .amap-copyright {
+ display: none !important;
+}
+</style>
--
Gitblit v1.8.0