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>