From 5300255dd40ac2ed67676da5568f0e4fd25a7078 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 05 三月 2024 13:33:46 +0800
Subject: [PATCH] fix:修改字体、图标、背景、阴影问题
---
src/views/daoAnOffice/chartgd.vue | 481 ++++++++++++++++++++++++++--------------------------
1 files changed, 242 insertions(+), 239 deletions(-)
diff --git a/src/views/daoAnOffice/chartgd.vue b/src/views/daoAnOffice/chartgd.vue
index 4dc2e16..b79bbc0 100644
--- a/src/views/daoAnOffice/chartgd.vue
+++ b/src/views/daoAnOffice/chartgd.vue
@@ -1,19 +1,15 @@
<template>
<div class="home">
<div id="map-box"></div>
- <div style="position: absolute;bottom: 20%;right: 35%;z-index: 999">
+ <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鑿滃崟-->
+ <!-- right鑿滃崟-->
<div class="info-div" @click="accidentProneRoadSections">
<img src="@/assets/img/sgyfd.png" alt="" class="item-tb-img">
<div class="info-div-p">
@@ -23,17 +19,17 @@
</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 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 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">
@@ -44,10 +40,10 @@
</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 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">
@@ -58,50 +54,50 @@
</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 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 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 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>-->
+ <!-- 鎼滅储-->
+ <!-- <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';
+<script setup>
+import { shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
-import {Pointer} from "@element-plus/icons-vue";
+import { Pointer } from "@element-plus/icons-vue";
const map = shallowRef(null);
const keyword = ref('');
@@ -118,20 +114,17 @@
let marker = ref(null);
let AMapObj, placeSearch, geocoder;
const props = defineProps({
- form:{}
+ form: {}
})
onMounted(async () => {
await initMap()
gddt()
});
-const gddt = () =>{
+const gddt = () => {
}
-const toggleTrafic = () => {
- emit('changeDt')
-};
const fencingConstruction = () => {
//鏋勫缓淇℃伅绐椾綋涓樉绀虹殑鍐呭
let info = [];
@@ -146,7 +139,7 @@
// position: [103.646554,30.989656],
// offset: new AMap.Pixel(-13, -30)
// });
- if (isKeyTour.value){
+ if (isKeyTour.value) {
// marker.setMap(map.value);
if (marker.value) {
marker.value.setMap(map.value); // 濡傛灉宸叉湁marker锛岄噸鏂拌缃湴鍥惧疄渚�
@@ -154,21 +147,21 @@
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],
+ position: [103.646233, 30.989999],
offset: new AMap.Pixel(13, 30),
});
}
- infoWindow.open(map.value,marker.value.getPosition());
+ infoWindow.open(map.value, marker.value.getPosition());
isKeyTour.value = false;
- }else {
+ } else {
console.log("娓呴櫎marker")
closeInfoWindow()
infoWindow.close()
marker.value.setMap(null); // 娓呴櫎marker
// marker.setMap(null)
// marker = null;
- isKeyTour.value =true
+ isKeyTour.value = true
}
}
@@ -196,7 +189,7 @@
// position: [103.646554,30.989656],
// offset: new AMap.Pixel(-13, -30)
// });
- if (isKeyTour.value){
+ if (isKeyTour.value) {
// marker.setMap(map.value);
if (marker.value) {
marker.value.setMap(map.value); // 濡傛灉宸叉湁marker锛岄噸鏂拌缃湴鍥惧疄渚�
@@ -204,13 +197,13 @@
marker.value = new AMap.Marker({
map: map.value,
icon: startIcon,
- position: [103.646044,30.989495],
+ position: [103.646044, 30.989495],
offset: new AMap.Pixel(13, 30)
});
}
- infoWindow.open(map.value,marker.value.getPosition());
+ infoWindow.open(map.value, marker.value.getPosition());
isKeyTour.value = false;
- }else {
+ } else {
console.log("娓呴櫎marker")
closeInfoWindow()
@@ -218,7 +211,7 @@
marker.value.setMap(null); // 娓呴櫎marker
// marker.setMap(null)
// marker = null;
- isKeyTour.value =true
+ isKeyTour.value = true
}
}
@@ -227,32 +220,32 @@
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>");
+ "\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 = 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],
+ position: [103.646554, 30.989656],
offset: new AMap.Pixel(13, 30)
});
}
- infoWindow.open(map.value,marker.value.getPosition());
+ infoWindow.open(map.value, marker.value.getPosition());
isKeyTour.value = false;
- }else {
+ } else {
console.log("娓呴櫎marker")
closeInfoWindow()
@@ -260,7 +253,7 @@
marker.value.setMap(null); // 娓呴櫎marker
// marker.setMap(null)
// marker = null;
- isKeyTour.value =true
+ isKeyTour.value = true
}
}
@@ -272,70 +265,70 @@
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]
- });
+ });
+ 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);
+ 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 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({
+ 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,
+ icon: endIcon,
map: map.value,
- position: [103.635750,30.983912]
+ position: [103.635750, 30.983912]
});
console.log('閲嶇偣杩愯緭浼佷笟')
// 娣诲姞鐐瑰嚮浜嬩欢鎵撳紑淇℃伅绐椾綋
@@ -349,33 +342,33 @@
// // 鎵撳紑淇℃伅绐椾綋
// 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]
-// });
+ // 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瀵硅薄浣跨敤锛�
+ // 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) {
+//鏋勫缓鑷畾涔変俊鎭獥浣�
+function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
@@ -413,63 +406,63 @@
info.appendChild(bottom);
return info;
}
-const clickHandler = (e)=> {
+const clickHandler = (e) => {
console.log(e)
// alert('鎮ㄥ湪[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]鐨勪綅缃偣鍑讳簡鍦板浘锛�');
- // 鍒涘缓淇℃伅绐椾綋瀹炰緥
+ // 鍒涘缓淇℃伅绐椾綋瀹炰緥
var title = '姝ｅ崕鐗╂祦',
- content = [];
+ 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)
- });
+ 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]);
+ // 鎵撳紑淇℃伅绐椾綋
+ infoWindow.open(map.value, [103.635750, 30.983912]);
};
-const btnlk= ()=>{
- console.log('瀹炴椂璺喌鍥惧眰',isVisible.value)
+const btnlk = () => {
+ console.log('瀹炴椂璺喌鍥惧眰', isVisible.value)
- if (isVisible.value){
+ if (isVisible.value) {
trafficLayer.value.show();
isVisible.value = false
- }else{
+ } else {
// map.value.removePlugin('map-box');
- console.log('闅愯棌瀹炴椂璺喌鍥惧眰',isVisible.value)
+ console.log('闅愯棌瀹炴椂璺喌鍥惧眰', isVisible.value)
// map.value.removePlugin('AMap.TruckDriving');
trafficLayer.value.hide();
isVisible.value = true
}
}
-function initMap(){
+function initMap() {
AMapLoader.load({
key: 'f7251c9df6162e94e699f1720f7932c4', //璁剧疆鎮ㄧ殑key
version: "2.0",
- plugins: ['AMap.ToolBar','AMap.Driving'],
+ plugins: ['AMap.ToolBar', 'AMap.Driving'],
AMapUI: {
version: "1.1",
plugins: [],
},
- Loca:{
+ Loca: {
version: "2.0.0"
},
- }).then((AMap)=>{
+ }).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],
+ 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
+ showTraffic: true
});
// 灏嗗疄鏃惰矾鍐靛浘灞傛坊鍔犲埌鍦板浘涓�
@@ -479,47 +472,47 @@
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,
- });
+ ['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, // 瀹氫綅鎴愬姛鍚庢槸鍚﹁嚜鍔ㄨ皟鏁村湴鍥捐閲庡埌瀹氫綅鐐�
});
- if(props.form){
- keyword.value=props.form.adress
+ 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,
+ let e = {
+ lnglat: {
+ lng: props.form.longitude,
lat: props.form.latitude
}
}
onMapClick(e)
}
- }).catch(e=>{
+ }).catch(e => {
console.log(e);
})
}
@@ -540,21 +533,21 @@
// 鐐瑰嚮鍦板浘
function onMapClick(e) {
coord.value = e.lnglat.lng + ',' + e.lnglat.lat
- geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
+ 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'
+ 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) {
+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'
+ adcode.value = result.regeocode.addressComponent.adcode.slice(0, 4) + '00'
}
})
}
@@ -587,14 +580,16 @@
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)
+const emit = defineEmits(['btnAddress', 'changeDt'])
+function btnsubmit() {
+ emit('btnAddress', coord.value, addresstext.value, adcode.value)
}
// initMap();
</script>
-<style>
-html, body, #container {
+<style scoped>
+html,
+body,
+#container {
height: 100%;
width: 100%;
}
@@ -664,41 +659,40 @@
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{
+.home {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
- .info-div{
+
+ .info-div {
align-items: center;
display: flex;
cursor: pointer;
margin-top: 0.5rem;
- //background-color: #4E2749;
+ 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{
+
+ .item-tb-img {
width: 20px;
height: 20px;
}
- .info-div-p{
+
+ .info-div-p {
flex: 1;
margin-left: 5px;
display: flex;
@@ -706,47 +700,54 @@
justify-content: space-between;
}
}
+
.info-box {
position: absolute;
top: 80px;
right: 34%;
width: 300px;
- //height: 100%;
- //background-color: #1f1f1f;
+ height: 100%;
+ background-color: #1f1f1f;
opacity: 0.6;
background: #11223A;
border: 1px solid #29466A;
- //background-color: #131F3F;
+ background-color: #131F3F;
padding: 1rem;
display: flex;
flex-direction: column;
}
- .item-tb{
- cursor: pointer;
+
+ .item-tb {
+ cursor: pointer;
margin-top: 20px;
- .item-tb-img{
+
+ .item-tb-img {
width: 65px;
}
- .item-tb-p{
- line-height:35px;
- //background: #00adb5;
- color:#fff;
+
+ .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
+ 0 0 0.1em #4e6ef2, 0 0 0.3em #36f, 3px 3px #4e6ef2, 4px 4px #315efb
}
}
}
-.ul{
+
+.ul {
margin-top: 10px;
height: 60%;
overflow-y: scroll;
- .li{
+
+ .li {
padding: 5px 10px;
background: #FFFFFF;
margin-bottom: 10px;
min-height: 60px;
- .d-flex{
+
+ .d-flex {
background: #FFFFFF;
color: #1f1f1f;
display: flex;
@@ -755,13 +756,14 @@
}
}
-#map-box{
+#map-box {
height: calc(100% - 30px);
width: 100%;
padding: 0px;
margin: 0px;
}
-.btn{
+
+.btn {
padding: 10px;
display: flex;
align-items: center;
@@ -773,6 +775,7 @@
:deep() .amap-logo {
display: none !important;
}
+
:deep() .amap-copyright {
display: none !important;
}
--
Gitblit v1.8.0