<template>
<view class="">
<!-- 地图 -->
<view class="map_container">
<map class="map" id="myMap" :longitude="longitude" :latitude="latitude" scale="16" :markers="markers"
@callouttap="callouttap" @markertap="markertap" @tap='getMap'>
</map>
</view>
<!-- 详细地址 -->
<view class="map_text">
<view class="text">
<text class="h1">{{textData.name}}</text>
<text>{{textData.desc}}</text>
</view>
<u-button type="primary" @click="sure">确认</u-button>
</view>
</view>
</template>
<script>
const app = getApp()
import amapFile from '@/common/amap-wx.js'
export default {
data() {
return {
longitude: '',
latitude: '',
key: '高德官网获取key',
markers: [{
iconPath: "定位点图标",
id: 0,
latitude: null,
longitude: null,
width: 23,
height: 33
}, ],
textData: {},
}
},
onLoad() {
this.getNowAdress()
},
methods: {
markertap(e) {},
callouttap(e) {},
getMap(e) {
let that = this
uni.chooseLocation({
success: function(res) {
that.textData = {
name: res.name,
desc: res.address
}
that.markers[0].latitude = res.latitude;
that.markers[0].longitude = res.longitude;
that.latitude = res.latitude
that.longitude = res.longitude
}
});
},
sure() {
},
getNowAdress() {
var that = this;
var myAmapFun = new amapFile.AMapWX({
key: that.key
});
myAmapFun.getRegeo({
success: function(data) {
that.markers[0].latitude = data[0].latitude;
that.markers[0].longitude = data[0].longitude;
that.latitude = data[0].latitude
that.longitude = data[0].longitude
that.textData = {
name: data[0].name,
desc: data[0].desc
}
},
fail: function(info) {
}
})
},
},
}
</script>
[小程序高德sdk下载地址](https://lbs.amap.com/api/wx/download)