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

11 篇文章 0 订阅
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
				
			},

感谢博主,以下是打赏区域:

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uniapp中使用百度地图实现定位功能并兼容小程序,你需要按照以下步骤操作: 1. 在百度地图开放平台申请一个应用,并获取到AK(Access Key)。 2. 在uniapp的manifest.json文件中添加以下代码: ``` "mp-baidu": { "appid": "your-appid", "apiKey": "your-apiKey" } ``` 将your-appid和your-apiKey替换成你申请得到的AK信息。 3. 在需要使用定位功能的页面中,引入百度地图组件: ``` <template> <view> <mp-baidu-map :longitude="longitude" :latitude="latitude" :markers="markers" :show-location="true"></mp-baidu-map> </view> </template> <script> import mpBaiduMap from '@/components/mp-baidu-map/mp-baidu-map.vue' export default { components: { mpBaiduMap }, data () { return { longitude: 116.404, latitude: 39.915, markers: [{ id: 1, longitude: 116.404, latitude: 39.915, title: 'Marker' }] } }, onReady () { uni.getLocation({ type: 'gcj02', success: (res) => { this.longitude = res.longitude this.latitude = res.latitude this.markers[0].longitude = res.longitude this.markers[0].latitude = res.latitude } }) } } </script> ``` 在onReady生命周期函数中,调用uni.getLocation获取当前位置的经纬度信息,并将其赋值给longitude和latitude变量。然后将这些信息传递给mp-baidu-map组件,以显示当前位置的地图。 注意:这里的经纬度是使用GCJ-02坐标系获取的,如果需要使用WGS-84坐标系,可以将type参数设置为wgs84。 4. 在小程序平台中,需要在app.json文件中声明mp-baidu组件: ``` "usingComponents": { "mp-baidu-map": "@/components/mp-baidu-map/mp-baidu-map" } ``` 以上就是在uniapp中使用百度地图实现定位功能并兼容小程序的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值