uniapp app端map地图点击获取经纬度

uniapp yekong

uniapp app端实现map地图点击地图获取当前经纬度.

使用注意事项

$getAppMap()

在页面中,必须在 onReady 中调用。
在组件中,必须在 mounted 中调用。
nvue没有$getAppMap(),请使用createMapContext
uni-app中使用原生地图无需提供占位div,得到$getAppMap()后直接js使用即可。

<template>
	<view class="amap-container">
		<map id="popMap" class="maps" :style="'height:'+windowHeight+'px'" :latitude="latitude" :longitude="longitude"
			:markers="covers"></map>
	</view>
</template>

<script>
	import img from '@/static/images/location.png'
	export default {
		data() {
			return {
				covers: [],
				latitude: '',
				longitude: ''
			}
		},
		mounted() {
			var that = this;
			this.addMapEvent()
		},
		methods: {
			addMapEvent() {
				let that = this;
				var maps = uni.createMapContext("popMap", this).$getAppMap();
				maps.onclick = function(point) {
					that.longitude = point.longitude
					that.latitude = point.latitude
					that.covers = [];
					that.covers = [{
						id: 1,
						latitude: point.latitude,
						longitude: point.longitude,
						iconPath: img,
						title: "我的位置"
					}]
				}
			},
		}
</script>

<style lang="scss" scoped>
	.amap-container {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.maps {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>


地图文档

uniapp地图文档

喜欢