|
@@ -1,100 +1,84 @@
|
|
<template>
|
|
<template>
|
|
<div class="search-layout">
|
|
<div class="search-layout">
|
|
- <el-input v-model="keyword" placeholder="输入名称搜索" style="width: 350px" clearable>
|
|
|
|
- <template #append>
|
|
|
|
|
|
+ <el-input v-model="keyword" placeholder="输入名称搜索" style="width: 350px" clearable @change="onSearch">
|
|
|
|
+ <!-- <template #append>
|
|
<el-button :icon="Search" />
|
|
<el-button :icon="Search" />
|
|
- </template>
|
|
|
|
|
|
+ </template> -->
|
|
</el-input>
|
|
</el-input>
|
|
<div class="rrr">
|
|
<div class="rrr">
|
|
- <div class="search-result" v-show="keyword && showSearch" ref="resultEl"></div>
|
|
|
|
- <div class="search-sh" v-show="keyword">
|
|
|
|
|
|
+ <div class="search-result" v-show="keyword">
|
|
|
|
+ <div class="search-list" v-for="item,index in keywordList" @click="hanleItem(item.name)">
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div class="search-sh" v-show="keyword">
|
|
<el-button style="width: 100%" @click="showSearch = !showSearch">
|
|
<el-button style="width: 100%" @click="showSearch = !showSearch">
|
|
{{ showSearch ? "收起" : "展开" }}搜索结果
|
|
{{ showSearch ? "收起" : "展开" }}搜索结果
|
|
</el-button>
|
|
</el-button>
|
|
- </div>
|
|
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="def-select-map-layout">
|
|
<div class="def-select-map-layout">
|
|
- <div class="def-select-map" ref="mapEl"></div>
|
|
|
|
|
|
+ <div class="def-select-map" id="mapEl" ref="mapEl"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div class="def-map-info" v-if="info">
|
|
|
|
- <p><span>纬度</span>{{ info.lat }}</p>
|
|
|
|
- <p><span>经度</span>{{ info.lng }}</p>
|
|
|
|
- <p><span>缩放级别</span>{{ info.zoom }}</p>
|
|
|
|
|
|
+ <div class="def-map-info" v-if="searchInfo">
|
|
|
|
+ <p><span>纬度</span>{{ searchInfo.lat }}</p>
|
|
|
|
+ <p><span>经度</span>{{ searchInfo.lng }}</p>
|
|
|
|
+ <!-- <p><span>缩放级别</span>{{ info.zoom }}</p> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
|
import { Search } from "@element-plus/icons-vue";
|
|
import { Search } from "@element-plus/icons-vue";
|
|
-import { ref, watchEffect } from "vue";
|
|
|
|
|
|
+import { wgs84_to_gcj02 } from "./map"
|
|
|
|
+import { getTipsList, getTipsNames, } from "@/store/case";
|
|
|
|
+import { ref, watchEffect, onMounted } from "vue";
|
|
import { QuiskExpose } from "@/helper/mount";
|
|
import { QuiskExpose } from "@/helper/mount";
|
|
import { debounce } from "@/util";
|
|
import { debounce } from "@/util";
|
|
import html2canvas from "html2canvas"
|
|
import html2canvas from "html2canvas"
|
|
|
|
+import L from 'leaflet'
|
|
|
|
+import 'leaflet/dist/leaflet.css'
|
|
export type MapImage = { blob: Blob | null; search: MapInfo | null };
|
|
export type MapImage = { blob: Blob | null; search: MapInfo | null };
|
|
-type MapInfo = { lat: number; lng: number; zoom: number; text: string };
|
|
|
|
|
|
+type MapInfo = { lat: number; lng: number; zoom: number; text: string; address: string; id: string };
|
|
|
|
+// const layer = L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}')
|
|
|
|
+const layer = L.tileLayer('http://a.map.jms.gd/tile/osm/{z}/{x}/{y}.png')
|
|
|
|
+// const layer = L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}&token=YOUR_API_KEY')
|
|
|
|
|
|
|
|
+
|
|
|
|
+let map: any = {}
|
|
|
|
+let clickMarker;
|
|
const keyword = ref("");
|
|
const keyword = ref("");
|
|
const showSearch = ref(true);
|
|
const showSearch = ref(true);
|
|
const info = ref<MapInfo>();
|
|
const info = ref<MapInfo>();
|
|
const searchInfo = ref<MapInfo>();
|
|
const searchInfo = ref<MapInfo>();
|
|
-
|
|
|
|
|
|
+const mapEl = ref<HTMLDivElement>();
|
|
|
|
+const keywordList = ref([]);
|
|
watchEffect(() => {
|
|
watchEffect(() => {
|
|
if (keyword.value) {
|
|
if (keyword.value) {
|
|
showSearch.value = true;
|
|
showSearch.value = true;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
-const mapEl = ref<HTMLDivElement>();
|
|
|
|
-const resultEl = ref<HTMLDivElement>();
|
|
|
|
-const searchAMap = ref<any>();
|
|
|
|
-
|
|
|
|
-watchEffect(async (onCleanup) => {
|
|
|
|
- if (!mapEl.value || !resultEl.value) {
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- const AMap = await AMapLoader.load({
|
|
|
|
- plugins: ["AMap.PlaceSearch", "AMap.Event"],
|
|
|
|
- key: "e661b00bdf2c44cccf71ef6070ef41b8",
|
|
|
|
- version: "2.0",
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- const map = new AMap.Map(mapEl.value, {
|
|
|
|
- WebGLParams: {
|
|
|
|
- preserveDrawingBuffer: true,
|
|
|
|
- },
|
|
|
|
- resizeEnable: true,
|
|
|
|
- });
|
|
|
|
- const placeSearch = new AMap.PlaceSearch({
|
|
|
|
- pageSize: 5,
|
|
|
|
- showCover: false,
|
|
|
|
- pageIndex: 1,
|
|
|
|
- map: map,
|
|
|
|
- panel: resultEl.value,
|
|
|
|
- autoFitView: true,
|
|
|
|
- });
|
|
|
|
- const setSearch = (data) => {
|
|
|
|
- console.log('setSearch', data);
|
|
|
|
- let city = data.cityname == data.adname? data.cityname : (data.cityname + data.adname);
|
|
|
|
- searchInfo.value = {
|
|
|
|
- text: data.pname + city + data.address,
|
|
|
|
- lat: data.location.lat,
|
|
|
|
- lng: data.location.lng,
|
|
|
|
- zoom: 0,
|
|
|
|
- };
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- placeSearch.on("listElementClick", (e) => {
|
|
|
|
- setSearch(e.data);
|
|
|
|
- showSearch.value = false;
|
|
|
|
- });
|
|
|
|
- let clickMarker;
|
|
|
|
|
|
+onMounted(() => {
|
|
|
|
+ // 'map'为HTML节点id
|
|
|
|
+ map = L.map(mapEl.value, {
|
|
|
|
+ center: [22.61, 113.05],//中心坐标
|
|
|
|
+ zoom: 10,//缩放级别
|
|
|
|
+ zoomControl: true, //缩放组件
|
|
|
|
+ attributionControl: false, //去掉右下角logol
|
|
|
|
+ layers: [layer],//图层
|
|
|
|
+ // center: [51.505, -0.09],
|
|
|
|
+ // zoom: 13
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
|
|
map.on("click", function (e) {
|
|
map.on("click", function (e) {
|
|
// 获取点击位置的经纬度坐标
|
|
// 获取点击位置的经纬度坐标
|
|
- var latitude = e.lnglat.lat;
|
|
|
|
- var longitude = e.lnglat.lng;
|
|
|
|
|
|
+ var latitude = e.latlng.lat;
|
|
|
|
+ var longitude = e.latlng.lng;
|
|
|
|
+ console.log('click', e, [longitude, latitude]);
|
|
|
|
|
|
searchInfo.value = {
|
|
searchInfo.value = {
|
|
text: "",
|
|
text: "",
|
|
@@ -102,39 +86,73 @@ watchEffect(async (onCleanup) => {
|
|
lng: longitude,
|
|
lng: longitude,
|
|
zoom: 0,
|
|
zoom: 0,
|
|
};
|
|
};
|
|
- clickMarker && map.remove(clickMarker);
|
|
|
|
|
|
+ clickMarker && clickMarker.remove();
|
|
clickMarker = null;
|
|
clickMarker = null;
|
|
// 在地图上添加标记
|
|
// 在地图上添加标记
|
|
- clickMarker = new AMap.Marker({
|
|
|
|
- position: [longitude, latitude],
|
|
|
|
|
|
+ clickMarker = L.marker([latitude, longitude],{
|
|
|
|
+ position: [latitude, longitude],
|
|
title: "点击位置",
|
|
title: "点击位置",
|
|
});
|
|
});
|
|
-
|
|
|
|
- map.add(clickMarker);
|
|
|
|
- });
|
|
|
|
- placeSearch.on("complete", function (result) {
|
|
|
|
- setTimeout(() => {
|
|
|
|
- const markers = map.getAllOverlays("marker");
|
|
|
|
- for (const marker of markers) {
|
|
|
|
- marker.on("click", () => {
|
|
|
|
- clickMarker && map.remove(clickMarker);
|
|
|
|
- clickMarker = null;
|
|
|
|
- setSearch(marker._data);
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- }, 500);
|
|
|
|
|
|
+ clickMarker.addTo(map);
|
|
|
|
+ map.panTo([latitude, longitude])
|
|
|
|
+ // map.add(clickMarker);
|
|
});
|
|
});
|
|
|
|
+})
|
|
|
|
|
|
- const getMapInfo = (): MapInfo => {
|
|
|
|
- var zoom = map.getZoom(); //获取当前地图级别
|
|
|
|
- var center = map.getCenter();
|
|
|
|
- return {
|
|
|
|
- text: "",
|
|
|
|
- zoom,
|
|
|
|
- lat: center.lat,
|
|
|
|
- lng: center.lng,
|
|
|
|
- };
|
|
|
|
- };
|
|
|
|
|
|
+const resultEl = ref<HTMLDivElement>();
|
|
|
|
+const searchAMap = ref<any>();
|
|
|
|
+
|
|
|
|
+watchEffect(async (onCleanup) => {
|
|
|
|
+ if (!mapEl.value || !resultEl.value) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+// const AMap = await AMapLoader.load({
|
|
|
|
+// plugins: ["AMap.PlaceSearch", "AMap.Event"],
|
|
|
|
+// key: "e661b00bdf2c44cccf71ef6070ef41b8",
|
|
|
|
+// version: "2.0",
|
|
|
|
+// });
|
|
|
|
+
|
|
|
|
+// const map = new AMap.Map(mapEl.value, {
|
|
|
|
+// WebGLParams: {
|
|
|
|
+// preserveDrawingBuffer: true,
|
|
|
|
+// },
|
|
|
|
+// resizeEnable: true,
|
|
|
|
+// });
|
|
|
|
+// const placeSearch = new AMap.PlaceSearch({
|
|
|
|
+// pageSize: 5,
|
|
|
|
+// showCover: false,
|
|
|
|
+// pageIndex: 1,
|
|
|
|
+// map: map,
|
|
|
|
+// panel: resultEl.value,
|
|
|
|
+// autoFitView: true,
|
|
|
|
+// });
|
|
|
|
+// const setSearch = (data) => {
|
|
|
|
+// console.log('setSearch', data);
|
|
|
|
+// let city = data.cityname == data.adname? data.cityname : (data.cityname + data.adname);
|
|
|
|
+// searchInfo.value = {
|
|
|
|
+// text: data.pname + city + data.address,
|
|
|
|
+// lat: data.location.lat,
|
|
|
|
+// lng: data.location.lng,
|
|
|
|
+// zoom: 0,
|
|
|
|
+// };
|
|
|
|
+// };
|
|
|
|
+
|
|
|
|
+// placeSearch.on("listElementClick", (e) => {
|
|
|
|
+// setSearch(e.data);
|
|
|
|
+// showSearch.value = false;
|
|
|
|
+// });
|
|
|
|
+// placeSearch.on("complete", function (result) {
|
|
|
|
+// setTimeout(() => {
|
|
|
|
+// const markers = map.getAllOverlays("marker");
|
|
|
|
+// for (const marker of markers) {
|
|
|
|
+// marker.on("click", () => {
|
|
|
|
+// clickMarker && map.remove(clickMarker);
|
|
|
|
+// clickMarker = null;
|
|
|
|
+// setSearch(marker._data);
|
|
|
|
+// });
|
|
|
|
+// }
|
|
|
|
+// }, 500);
|
|
|
|
+// });
|
|
//绑定地图移动与缩放事件
|
|
//绑定地图移动与缩放事件
|
|
map.on("moveend", () => {
|
|
map.on("moveend", () => {
|
|
info.value = getMapInfo();
|
|
info.value = getMapInfo();
|
|
@@ -149,6 +167,55 @@ watchEffect(async (onCleanup) => {
|
|
map.destroy();
|
|
map.destroy();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
+const getMapInfo = (): MapInfo => {
|
|
|
|
+ var zoom = map.getZoom(); //获取当前地图级别
|
|
|
|
+ var center = map.getCenter();
|
|
|
|
+ return {
|
|
|
|
+ text: "",
|
|
|
|
+ zoom,
|
|
|
|
+ lat: center.lat,
|
|
|
|
+ lng: center.lng,
|
|
|
|
+ };
|
|
|
|
+ };
|
|
|
|
+const onSearch = (val) => {
|
|
|
|
+ getTipsList(val).then((res) => {
|
|
|
|
+ console.log('getTipsList', res);
|
|
|
|
+ keywordList.value = res.data
|
|
|
|
+ });
|
|
|
|
+ console.log('onSearch', val, 'keyword.value', keyword.value);
|
|
|
|
+
|
|
|
|
+};
|
|
|
|
+const hanleItem = (name) => {
|
|
|
|
+ // keyword.value = item.name;
|
|
|
|
+ getTipsNames(name).then((ress) => {
|
|
|
|
+ let res = ress.data;
|
|
|
|
+ // longlat = wgs84_to_gcj02(Number(res.lng),Number(res.lat))
|
|
|
|
+ keyword.value = '';
|
|
|
|
+ searchInfo.value = {
|
|
|
|
+ ...res,
|
|
|
|
+ // lng: longlat[0],
|
|
|
|
+ // lat: longlat[1],
|
|
|
|
+ text: res.name,
|
|
|
|
+ }
|
|
|
|
+ clickMarker && clickMarker.remove();
|
|
|
|
+ // let icon = L.icon({
|
|
|
|
+ // iconUrl: require('./icon.svg'),
|
|
|
|
+ // iconSize: [25, 30],
|
|
|
|
+ // iconAnchor: [12, 30]
|
|
|
|
+ // });
|
|
|
|
+ clickMarker = null;
|
|
|
|
+
|
|
|
|
+ // 在地图上添加标记
|
|
|
|
+ clickMarker = L.marker([res.lat, res.lng],{
|
|
|
|
+ position: [res.lat, res.lng],
|
|
|
|
+ title: "点击位置",
|
|
|
|
+ // icon,
|
|
|
|
+ });
|
|
|
|
+ clickMarker.addTo(map);
|
|
|
|
+ map.panTo([res.lat, res.lng])
|
|
|
|
+ })
|
|
|
|
+ // onSearch(item.name);
|
|
|
|
+}
|
|
var dataURLtoBlob = function (dataurl){
|
|
var dataURLtoBlob = function (dataurl){
|
|
var arr = dataurl.split(','),
|
|
var arr = dataurl.split(','),
|
|
mime = arr[0].match(/:(.*?);/)[1],
|
|
mime = arr[0].match(/:(.*?);/)[1],
|
|
@@ -216,6 +283,11 @@ defineExpose<QuiskExpose>({
|
|
max-height: 450px;
|
|
max-height: 450px;
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
+ .search-list{
|
|
|
|
+ background: #fff;
|
|
|
|
+ padding-left: 10px;
|
|
|
|
+ line-height: 36px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.def-map-info {
|
|
.def-map-info {
|