|
|
@@ -1,55 +1,159 @@
|
|
|
<script setup lang='ts'>
|
|
|
import { onMounted, ref } from 'vue'
|
|
|
-import { shallowRef } from '@vue/reactivity'
|
|
|
+import { reactive, ShallowRef, shallowRef } from '@vue/reactivity'
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
+import axios from 'axios';
|
|
|
let map = shallowRef(null);
|
|
|
const emit = defineEmits(["getMapData"]);
|
|
|
+let centerPoint = reactive({ arr: [120.67012, 31.266833] })
|
|
|
+let city = ref('苏州市')
|
|
|
+let addressInfo = ref('')
|
|
|
const initMap = () => {
|
|
|
AMapLoader.load({
|
|
|
key: "21132ea36aed6ab1884085a836f12ca9", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
- plugins: ['AMap.ToolBar', 'AMap.Driving'],
|
|
|
AMapUI: {
|
|
|
version: "1.1",
|
|
|
- plugins: ['misc/PositionPicker'],
|
|
|
-
|
|
|
+ plugins: ['misc/PositionPicker', 'misc/PoiPicker'],
|
|
|
},
|
|
|
Loca: {
|
|
|
version: "2.0.0"
|
|
|
}
|
|
|
}).then((AMap) => {
|
|
|
- AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker: new (arg0: { mode: string; map: any; }) => any) => {
|
|
|
- map = new AMap.Map("container", { //设置地图容器id
|
|
|
- viewMode: "3D", //是否为3D地图模式
|
|
|
- zoom: 16, //初始化地图级别
|
|
|
- center: [120.67012, 31.266833], //初始化地图中心点位置
|
|
|
+ map = new AMap.Map("container", { //设置地图容器id
|
|
|
+ viewMode: "3D", //是否为3D地图模式
|
|
|
+ zoom: 16, //初始化地图级别
|
|
|
+ center: centerPoint.arr, //初始化地图中心点位置
|
|
|
+ });
|
|
|
+ let marker = new AMap.Marker();
|
|
|
+ let infoWindow = new AMap.InfoWindow({
|
|
|
+ offset: new AMap.Pixel(0, -20)
|
|
|
+ });
|
|
|
+ AMapUI.loadUI(['misc/PositionPicker', 'misc/PoiPicker'], (PositionPicker: new (arg0: { mode: string; map: ShallowRef<null>; }) => any, PoiPicker: new (arg0: { input: string; }) => any) => {
|
|
|
+ let poiPicker = new PoiPicker({
|
|
|
+ input: 'pickerInput'
|
|
|
});
|
|
|
+ const poiPickerReady = (poiPicker: { on: (arg0: string, arg1: (poiResult: any) => void) => void; onCityReady: (arg0: () => void) => void; suggest: (arg0: string) => void; }, AMap: { Marker: new () => any; InfoWindow: new (arg0: { offset: any; }) => any; Pixel: new (arg0: number, arg1: number) => any; }) => {
|
|
|
+ window.poiPicker = poiPicker;
|
|
|
+ //选取了某个POI
|
|
|
+ poiPicker.on('poiPicked', (poiResult: { source: any; item: any; }) => {
|
|
|
+ console.log('选取点：', poiResult);
|
|
|
+ let poi = poiResult.item
|
|
|
+ marker.setMap(map);
|
|
|
+ marker.setPosition(poi.location);
|
|
|
+ map.setCenter(marker.getPosition());
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //初始化poiPicker
|
|
|
+ poiPickerReady(poiPicker, AMap);
|
|
|
let positionPicker = new PositionPicker({
|
|
|
- mode: 'dragMarker',
|
|
|
+ mode: 'dragMap',
|
|
|
map: map
|
|
|
});
|
|
|
positionPicker.on('success', (positionResult: any) => {
|
|
|
console.log('positionResult:', positionResult);
|
|
|
- emit('getMapData',JSON.stringify(positionResult))
|
|
|
+ let poi = positionResult.regeocode.pois[0]
|
|
|
+
|
|
|
+ // poiPicker.suggest(positionResult.address);
|
|
|
+ // marker.setMap(map);
|
|
|
+ // marker.setPosition(poi.location);
|
|
|
+ // map.setCenter(marker.getPosition());
|
|
|
+ infoWindow.setMap(map);
|
|
|
+ infoWindow.setPosition(poi.location);
|
|
|
+ let html = `<div style="font-size:16px;">${poi.name}</div><div style="font-size:14px;margin-top:5px;color: #999999;">${poi.address}</div>`
|
|
|
+ infoWindow.setContent(html);
|
|
|
+ addressInfo.value = JSON.stringify(positionResult)
|
|
|
+
|
|
|
});
|
|
|
positionPicker.start();
|
|
|
+
|
|
|
})
|
|
|
}).catch((e: String) => {
|
|
|
console.log(e);
|
|
|
})
|
|
|
}
|
|
|
-onMounted(() => {
|
|
|
+
|
|
|
+const ipLocation = async () => {
|
|
|
+ return new Promise((res, rej) => {
|
|
|
+ axios.get('https://restapi.amap.com/v3/ip', {
|
|
|
+ params: {
|
|
|
+ key: '5ae8644771ef9abf9cfb3ea23b1df6ca'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ console.log('ip-response', response);
|
|
|
+ res(response.data)
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log(error);
|
|
|
+ rej(error)
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+}
|
|
|
+const cityLocation = async () => {
|
|
|
+ return new Promise((res, rej) => {
|
|
|
+ axios.get('https://restapi.amap.com/v3/place/text', {
|
|
|
+ params: {
|
|
|
+ key: '5ae8644771ef9abf9cfb3ea23b1df6ca',
|
|
|
+ keywords: city.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ console.log('ip-response', response);
|
|
|
+ res(response.data)
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log(error);
|
|
|
+ rej(error)
|
|
|
+ });
|
|
|
+ })
|
|
|
+}
|
|
|
+const confirm = () => {
|
|
|
+ emit('getMapData', addressInfo.value)
|
|
|
+}
|
|
|
+onMounted(async () => {
|
|
|
+ const ip: any = await ipLocation()
|
|
|
+ if (ip.status === '1') {
|
|
|
+ city.value = ip.city
|
|
|
+ }
|
|
|
+ const cityInfo: any = await cityLocation()
|
|
|
+ console.log('cityInfo', cityInfo);
|
|
|
+ if (cityInfo.status === '1') {
|
|
|
+ let poi = cityInfo.pois[0]
|
|
|
+ let location = poi.location.split(',')
|
|
|
+ centerPoint.arr = [location[0], location[1]]
|
|
|
+ }
|
|
|
initMap()
|
|
|
})
|
|
|
</script>
|
|
|
<template>
|
|
|
- <div id="container"></div>
|
|
|
+ <div class="map">
|
|
|
+ <input id="pickerInput" placeholder="输入关键字选取地点" />
|
|
|
+ <div id="container"></div>
|
|
|
+ <div class="w-full flex justify-end mt-20px">
|
|
|
+ <a-button type="primary" @click="confirm">确认</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<style lang='scss' scoped>
|
|
|
-#container {
|
|
|
- padding: 0px;
|
|
|
- margin: 0px;
|
|
|
- width: 100%;
|
|
|
- height: 80vh;
|
|
|
+.map {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ #pickerInput {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ width: 300px;
|
|
|
+ padding: 5px 5px;
|
|
|
+ z-index: 99999;
|
|
|
+ }
|
|
|
+
|
|
|
+ #container {
|
|
|
+ padding: 0px;
|
|
|
+ margin: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 80vh;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
Funny