目录
一、创建map
<!-- 地图展示 -->
<view class="mymap">
<!-- <view class="mymap__map"> -->
<map class="mymap__map" id="map" :latitude="mapxx.latitude" :longitude="mapxx.longitude"
:scale="mapxx.scale" :markers="mapxx.markers"
@regionchange="mapPoint"
></map>
<!-- </view> -->
</view>二、data中声明变量
let infowidth = 32,infoheight = 42;
let infoiconPath = '/static/images/map/loaction-red.png';
data(){
return{
key:'自己的key',
mapxx:{
latitude:35.931616,
longitude:120.008822,
scale:16,
markers:{
id:0,
latitude:35.931616,
longitude:120.008822,
iconPath:'/static/images/map/loaction-red.png'
}
},
}
}三、获取当前位置信息，进行定位
onLoad() {
//获取当前的地理位置
let vthis = this;
uni.getLocation({
type: 'gcj02',
success: function (res) {
vthis.mapxx.latitude = res.latitude;
vthis.mapxx.longitude = res.longitude;
vthis.mapxx.markers = [{
id:1,
latitude:res.latitude,
longitude:res.longitude,
iconPath:'/static/images/map/loaction-red.png'
}];
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
}
});
},四、在methods中写移动图标获取地名地址的方法
//地图相关操作 -start
mapPoint(e){
// 地图发生变化的时候，获取中间点，也就是用户选择的位置toFixed
if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
let that = this;
this.mapCtx = wx.createMapContext("map");
this.mapCtx.getCenterLocation({
type: 'gcj02',
success: function(res) {
that.mapxx.markers = [{
latitude: res.latitude,
longitude: res.longitude,
iconPath: infoiconPath,
width: infowidth,
height: infoheight,
}]
that.loadCity(res.longitude,res.latitude);
}
})
}
},
loadCity(longitude, latitude) {
var _self = this;
wx.request({
url: 'https://restapi.amap.com/v3/geocode/regeo',
data: {
key: _self.key,
location: longitude + "," + latitude,
extensions: "all",
s: "rsx",
sdkversion: "sdkversion",
logversion: "logversion"
},
success: function (res) {
_self.dybd.userInfo.dwhzz = res.data.regeocode.formatted_address;
},
fail: function (res) {
console.log('获取地理位置失败')
}
})
},五、最终展示效果
