|
@@ -142,126 +142,4 @@ button {
|
|
|
color: white;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
-</style>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-<template>
|
|
|
- <view class="map-popup-box">
|
|
|
- <view class="icon-title-navBar-box">
|
|
|
- <view @click="goUpPage" class="nav-bar-icon"></view>
|
|
|
- <text class="nav-bar-title">选择地址</text>
|
|
|
- </view>
|
|
|
- <!-- 城市选择器 -->
|
|
|
- <view class="city-picker-box">
|
|
|
- <picker mode="region" @change="handleCityChange">
|
|
|
- <view class="city-picker">
|
|
|
- <text>{{ selectedCity }}</text>
|
|
|
- <uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
|
|
|
- </view>
|
|
|
- </picker>
|
|
|
- </view>
|
|
|
- <!-- 查询地址 -->
|
|
|
- <view class="phone-search-box">
|
|
|
- <input class="search-input" placeholder="请输入地址" v-model="data.keyword" />
|
|
|
- <view class="search-icon" @click="handleClick">
|
|
|
- <uni-icons type="search" size="24" color="#fff"></uni-icons>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <map style="width: 100%; height: 300px;" :latitude="data.latitude" :longitude="data.longitude"
|
|
|
- :markers="data.covers" :show-location="true"> </map>
|
|
|
- <!-- 搜索结果 -->
|
|
|
- <view v-if="result" class="map-card-list">
|
|
|
- <view v-for="(item,index) in result.data" :key="index" @click="xuanzeAdress(item)" class="map-card-box">
|
|
|
- <view>
|
|
|
- <view class="map-card-title"><text v-if="index==0" class="dqwz-text">当前位置</text>{{item.title}}</view>
|
|
|
- <view class="map-card-address">{{item.address}}</view>
|
|
|
- </view>
|
|
|
- <icon class="map-active-icon" v-if="index==0"></icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
- import { reactive, ref } from "vue";
|
|
|
- import myIcon from "@/static/images/common/markIcon.png";
|
|
|
- import { onLoad } from "@dcloudio/uni-app";
|
|
|
- import { useCustomMap } from "@/components/customMap/useMap.js";
|
|
|
-
|
|
|
- const emits = defineEmits(['close', 'xuanzeAdress', 'currentWeizhi']);
|
|
|
- const { getPositionSearchByKeyword } = useCustomMap();
|
|
|
-
|
|
|
- const result = ref(null);
|
|
|
- const selectedCity = ref('选择城市'); // 默认显示“选择城市”
|
|
|
-
|
|
|
- const data = reactive({
|
|
|
- keyword: '', // 关键字
|
|
|
- latitude: 0, // 纬度
|
|
|
- longitude: 0, // 经度
|
|
|
- covers: [{ latitude: 0, longitude: 0, iconPath: myIcon, width: 30, height: 30 }]
|
|
|
- });
|
|
|
-
|
|
|
- // 城市选择事件
|
|
|
- function handleCityChange(e) {
|
|
|
- const city = e.detail.value[1]; // 获取选择的城市
|
|
|
- selectedCity.value = city;
|
|
|
- updateMapCenter(city);
|
|
|
- }
|
|
|
-
|
|
|
- // 更新地图中心点
|
|
|
- async function updateMapCenter(city) {
|
|
|
- const cityLocation = await getCityLocation(city);
|
|
|
- if (cityLocation) {
|
|
|
- data.latitude = cityLocation.lat;
|
|
|
- data.longitude = cityLocation.lng;
|
|
|
- data.covers[0].latitude = cityLocation.lat;
|
|
|
- data.covers[0].longitude = cityLocation.lng;
|
|
|
- // 重新搜索附近的地点
|
|
|
- getPositionSearchByKeyword(data.keyword || '公司', `nearby(${cityLocation.lat},${cityLocation.lng},1000)`, onSuccess, onError, {
|
|
|
- page: 1,
|
|
|
- size: 3,
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 获取城市经纬度
|
|
|
- async function getCityLocation(city) {
|
|
|
- const url = `https://apis.map.qq.com/ws/geocoder/v1/?address=${city}&key=${Key}`;
|
|
|
- try {
|
|
|
- const res = await uni.request({ url });
|
|
|
- if (res.data && res.data.result && res.data.result.location) {
|
|
|
- return res.data.result.location; // 返回经纬度对象 { lat, lng }
|
|
|
- }
|
|
|
- } catch (err) {
|
|
|
- console.error('获取城市位置失败', err);
|
|
|
- }
|
|
|
- return null;
|
|
|
- }
|
|
|
-
|
|
|
- // 其他代码保持不变...
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
- .city-picker-box {
|
|
|
- padding: 10px;
|
|
|
- background-color: #fff;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
- }
|
|
|
-
|
|
|
- .city-picker {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .city-picker text {
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
</style>
|