定位地图

<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>

猜你喜欢

转载自blog.csdn.net/QZ9420/article/details/113773744
今日推荐