uni小程序地图map的使用以及地图（去导航）调用本地地图功能

最新推荐文章于 2024-08-02 21:03:54 发布

csdnvsaqin

最新推荐文章于 2024-08-02 21:03:54 发布

阅读量2.1k

点赞数 1

分类专栏： uni-app vue map 文章标签：小程序 vue.js uni-app 前端

本文链接：https://blog.csdn.net/qq_37570945/article/details/121679554

版权

uni-app 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

map

2 篇文章 0 订阅

订阅专栏

点击去导航实现去导航功能

<view class="store_top">
			<view class="flexno flex2">
				<view class="store_address">提货门店：{{shopList.detailedAddress}}</view>
				<view class="store_address2" @tap="gotoNavigation()">去导航</view>
			</view>
			<view class="store_map">
				<map :latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="covers">
				</map>
			</view>
		</view>

data()里面的参数定义：

具体配置可以查看：https://uniapp.dcloud.io/component/map

//经纬度
				latitude: 39.909,
				longitude: 116.39742,
				//添加标记点
				covers: [
						{
						latitude: 39.9085,
						longitude: 116.39747,
						// #ifdef APP-PLUS
						iconPath: '',
						// #endif
						// #ifndef APP-PLUS
						iconPath: '',
						// #endif
					}
				],
				//添加连接路线
				polyline: [
						{ //指定一系列坐标点，从数组第一项连线至最后一项
						points: [{
								latitude: 40.013305,
								longitude: 118.685713
							},
							{
								latitude: 40.013,
								longitude: 118.685
							},
						],
						color: "#0000AA", //线的颜色
						width: 2, //线的宽度
						dottedLine: true, //是否虚线
						arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
					},
				],

点击去导航实现代码

//去导航
			gotoNavigation() {
				if (this.latitude == '' || this.longitude == '') {
					uni.showToast({
						title: '请开启手机定位',
						icon: 'none'
					});
					return false
				}
				let _that = this;
				// #ifdef MP-WEIXIN
				wx.getLocation({
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					success(res) {
						const latitude = Number(_that.latitude);
						const longitude = Number(_that.longitude);
						wx.openLocation({
							latitude,
							longitude,
							scale: 18
						})
					}
				})
				// #endif
				
			},

感谢博主，以下是打赏区域：