地图功能

components/customMap/customMap.vue

@@ -1,32 +1,64 @@
 <template>
 	<view>
-		<map style="width: 100%; height: 300px;" :latitude="data.latitude" :longitude="data.longitude" :markers="data.covers"> </map>
+		<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,
+		reactive,ref
 	} from "vue"
 	import myIcon from "@/static/images/common/markIcon.png"
-	import {onLoad} from "@dcloudio/uni-app"
+	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: 39.909,
-		longitude: 116.39742,
+		latitude: 0,
+		longitude: 0,
 		covers: [{
-			latitude: 39.909,
-			longitude: 116.39742,
+			latitude: 0,
+			longitude: 0,
 			iconPath: myIcon,
+			width: 30,
+			height: 30
 		}]
 	})
-	
+
+	// 初始化
 	function initLocation() {
+		console.log('init')
 		uni.getLocation({
 			type: 'gcj02',
-			success: function (res) {
+			success: function(res) {
+				console.log('res', res)
 				data.longitude = res.longitude;
 				data.latitude = res.latitude;
 				data.covers[0].longitude = res.longitude;
@@ -36,11 +68,11 @@
 			}
 		});
 	}
-	
+
 	onLoad(() => {
+		console.log('初始化')
 		initLocation();
 	})
-	
 </script>
 
 <style>

components/customMap/useMap.js

@@ -0,0 +1,48 @@
+// 文档地址 https://lbs.qq.com/service/webService/webServiceGuide/search/webServiceSearch
+// 注意当前请求仅打包后有效
+import request from '@/utils/request'
+import {
+	ref
+} from "vue"
+
+// 关键词不全
+const httpUrl = "https://apis.map.qq.com/ws/place/v1/search"
+const Key = `KBYBZ-FS3KZ-U2FXR-7VPDX-L7J46-23F55`
+
+export function useCustomMap() {
+	// 关键字 范围 页码 数量 成功回调 失败回调
+	function getPositionSearchByKeyword(keyword, boundary, successFun, errorFun, options) {
+		let cpage = options.page || 1;
+		let csize = options.size || 20;
+		let cboundary = boundary; //'nearby(39.992870,116.310250,1000)'
+
+		uni.showLoading({
+			title: '加载中'
+		})
+		uni.request({
+			url: httpUrl,
+			method: 'get',
+			data: {
+				key: Key,
+				output: "json",
+				keyword: keyword,
+				boundary: cboundary,
+				page_size: csize,
+				page_index: cpage,
+			},
+			timeout: 20000,
+		}).then(res => {
+			successFun && successFun(res)
+		}).catch(err => {
+			console.log('err')
+			errorFun && errorFun(err);
+		}).finally(() => {
+			uni.hideLoading();
+		})
+	}
+
+	return {
+		getPositionSearchByKeyword
+	}
+
+}

manifest.json

@@ -32,7 +32,8 @@
         },
         /* 模块配置 */
         "modules" : {
-            "Camera" : {}
+            "Camera" : {},
+            "Maps" : {}
         },
         /* 应用发布信息 */
         "distribute" : {
@@ -75,6 +76,11 @@
                     "alipay" : {
                         "__platform__" : [ "ios", "android" ]
                     }
+                },
+                "maps" : {
+                    "tencent" : {
+                        "key" : "KBYBZ-FS3KZ-U2FXR-7VPDX-L7J46-23F55"
+                    }
                 }
             },
             "splashscreen" : {