定位地图

<template>
	<view>
		<map :scale='18' id="myMap" style="width: 100%;" :style="{height: mapHeight + 'px'}" :markers="markers" :longitude="longitude"
		 :latitude="latitude" :circles="circles"></map>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 在data中初始化的中心位置
				latitude: 39.9,
				longitude: 116.4,
				//data中定义
				circles: [], //圆
				markers: [], //标记点

			}
		},
		onLoad() {
			const _this = this;
			uni.getSystemInfo({
				success: (res) => {
					_this.mapHeight = res.screenHeight - res.statusBarHeight
					_this.mapHeight = _this.mapHeight
					console.log(res)
				},
				
			})
		},

		methods: {
			getLocationInfo() {
				var that = this
				uni.getLocation({
						type: 'wgs84',
						success(res) {
							console.log(res, "当前位置");
							that.latitude = res.latitude //当前纬度
							that.longitude = res.longitude //当前经度
						}
					})
				},
				// 获取地理位置
				getLocationInfo() {
						var that = this
						uni.getLocation({
							type: 'wgs84',
							success(res) {
								console.log(res, "当前位置");
								that.latitude = res.latitude
								that.longitude = res.longitude
								//标记点
								that.markers = [{
									id: 1,
									latitude: res.latitude,
									longitude: res.longitude,
									iconPath: '../../../static/img/pos.png',
								}]
								that.circles = [{ //在地图上显示圆
									latitude: res.latitude,
									longitude: res.longitude,
									fillColor: "#D9E6EF", //填充颜色
									color: "#A7B6CB", //描边的颜色
									radius: 50, //半径
									strokeWidth: 2 //描边的宽度
								}]
							}
						});
					},

			}
		}
</script>

<style>

</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值