uniapp微信小程序使用地图显示指定位置并从当前位置导航

最新推荐文章于 2024-09-29 15:42:34 发布

满楼、

最新推荐文章于 2024-09-29 15:42:34 发布

阅读量4k

点赞数 1

分类专栏：前端微信小程序文章标签：小程序 js 定位 uni-app

本文链接：https://blog.csdn.net/weixin_42367288/article/details/116700153

版权

前端同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

微信小程序

4 篇文章 0 订阅

订阅专栏

<view class="row-bottom">
		<map id="map" :longitude="longitude" :latitude="latitude" :scale="scale" :circles="circles" :markers="markers" :polyline="polyline" show-location style="width: 100%; height: 500rpx;"></map>
</view>

在这里插入图片描述

//设置markers 
// 上边标签内经纬度设置只是设置 以哪个经纬度为中心生成地图 
// markers 设置地图标记点 可以设置图片和点击提示

that.markers = [{
				id: "0",
				latitude: that.latitude,
				longitude: that.longitude,
				width: 50,
				height: 50,
				iconPath: '../../static/img/location.png',
				title: "提示"
			}];

// 获取当前自己的定位
	uni.getLocation({
		type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
		success: function(res) {
			console.log(res, 'www')
			// that.latitude = res.latitude;
			// that.longitude = res.longitude;
			console.log(res, 'res.latitude', )
		}
	})

//导航功能
// 可以加载地图上 也可以在地图下边添加具体位置和名称 +导航
//加在哪里 给谁添加点击事件 
//html
<view class="box-border" ">
	<view class="ib" ">
		<view class="" ">
			姓名 : {{name}}
		</view>
		<view class="" >
			地址 : {{addr}}
		</view>
	</view>
	<view class="ib" ;">
		<img src="../../static/img/nearme.png" alt="" @click="markertap" >
	</view>
</view>

//js
	markertap(e) {
		let that = this
		console.log(e.markerId)
		uni.openLocation({
			latitude: that.latitude, //维度
			longitude: that.longitude, //经度
			name: "目的地", //目的地定位名称
			scale: 15, //缩放比例
			address: "目的地" //导航详细地址
		})
	},