uni-app map 地图

最新推荐文章于 2025-04-20 20:46:37 发布

张贤生是你呢

最新推荐文章于 2025-04-20 20:46:37 发布

阅读量352

点赞数 1

文章标签： uni-app vue

本文链接：https://blog.youkuaiyun.com/weixin_57068416/article/details/120883271

版权

这篇博客展示了如何在Vue.js应用中结合地图API实现设备搜索功能和地图上的标记点点击事件。通过`u-sticky`组件创建搜索栏，监听`@custom`事件来触发设备搜索。地图部分利用`map`组件设置中心点和标记点，并通过`@markertap`和`@tap`事件监听标记点和地图的点击操作。在`onShow`生命周期钩子中获取地图信息和设备数据，实现了动态加载和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<template>
	<view class="box">
	<!-- 	<view class="inputDevice">
			
		</view> -->
		<view class="container">
				<u-sticky>
					<!-- 只能有一个根元素 -->
					<view class="sticky" style="background: #fff;">
						<u-search placeholder="搜索设备名称" v-model="describeName" @custom='searchClick'></u-search>
					</view>
				</u-sticky>
			</view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 650px;" :latitude="latitude" :longitude="longitude" :markers="covers"
					@markertap="markertap" @tap="tap">
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				// 地图中心点
				latitude: 39.909,
				longitude: 116.39742,
				// 地图信息
				covers: [],
				// 搜索设备名称
				describeName: "",
				windowHeight:""
			}
		},
		onShow() {
			this.getDataList()
			uni.getSystemInfo({
				success: function (res) {
					this.windowHeight = res.windowHeight + "px"
					console.log(res.windowHeight)
				}
			})
		},
		methods: {
			// 搜索click
			searchClick(e) {
				const parameter = {
					pageNum: 1,
					pageSize: 10,
					name: e
				}
				this.$api.listInstance(parameter).then(res => {
					this.latitude = res.rows.locationLatitudes,
						this.longitude = res.rows.locationLongitudes
				})
			},
			// list数据
			getDataList() {
				this.$api.listInstances().then(res => {
					// this.dataList = res.data
					console.log(res.rows)
					const dataList = res.rows
					const covers = []
					dataList.forEach((e) => {
						console.log(e.id)
						this.covers.push({
							value: e.id,
							latitude: e.locationLatitudes - 0.006,
							longitude: e.locationLongitudes - 0.0065
						})
					})
				})
			},
			// 标记点的点击事件
			markertap(e) {

				console.log("===你点击了标记点===")
				console.log(e.detail)
			},
			//点击地图时触发; 事件
			tap(e) {
				// console.log("===你点击了地图点===")
				console.log(e.detail)
			},
		}
	}
</script>