uniProject/components/customMap/customMap.vue

<template>
	<view>
		<map style="width: 100%; height: 300px;" :latitude="data.latitude" :longitude="data.longitude"
			:markers="data.covers" :show-location="true"> </map>
			<input type="text" v-model="data.keyword" placeholder="请输入地址" style="padding: 10px 0">
			
			<view>{{result && result.data.data}}</view>
			
			<button @click="handleClick">查询</button>
	</view>
</template>

<script setup>
	import {
		reactive,ref
	} from "vue"
	import myIcon from "@/static/images/common/markIcon.png"
	import {
		onLoad, onHide, onShow
	} from "@dcloudio/uni-app"
	import {useCustomMap} from "@/components/customMap/useMap.js"
	const { getPositionSearchByKeyword } = useCustomMap();
	
	const result = ref(null);
	
	function handleClick() {
		if (data.keyword) {
			getPositionSearchByKeyword(data.keyword, `nearby(${data.latitude},${data.longitude},1000)`,  onSuccess, onError, {page:1, size:3,})
		}
	}

	function onSuccess(data) {
		console.log('数据', data);
		result.value = data
	}
	function onError(err) {
		console.log('错误', err)
	}

	const data = reactive({
		keyword: '', // 关键字
		id: 0, // 使用 marker点击事件 需要填写id
		title: 'map',
		latitude: 0,
		longitude: 0,
		covers: [{
			latitude: 0,
			longitude: 0,
			iconPath: myIcon,
			width: 30,
			height: 30
		}]
	})

	// 初始化
	function initLocation() {
		console.log('init')
		uni.getLocation({
			type: 'gcj02',
			success: function(res) {
				console.log('res', res)
				data.longitude = res.longitude;
				data.latitude = res.latitude;
				data.covers[0].longitude = res.longitude;
				data.covers[0].latitude = res.latitude;
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
			}
		});
	}

	onLoad(() => {
		console.log('初始化')
		initLocation();
	})
</script>

<style>

</style>