微信小程序 使用map组件 地图获取位置、移动选点、逆地址解析
程序员文章站
2022-07-13 22:19:04
...
实现拖动地图,实现地图上选点,并解析地址
效果如下图:中心图片为目标位置。红色图标为视图发生变化时移动到中心点。
wxml文件:
<view>
<!--地图容器-->
<map id="myMap"
markers="{{markers}}"
style="width:100%;height:500px;"
longitude="{{ cityInfo.lng }}"
latitude="{{cityInfo.lat}}"
scale='16'
show-location="true"
include-points="true"
bindregionchange="regionChange"
>
<cover-view class="center-img">
<cover-image src="/images/tx-map-l1.png"></cover-image>
</cover-view>
</map>
<view class="item-title">
<view>address:{{chooseAddress}}</view>
<view>recommend:{{chooseRecommend}}</view>
<view>
chooseLat:{{chooseLat}}
</view>
<view>
chooseLng:{{chooseLng}}
</view>
</view>
</view>
js文件
const app = getApp();
// 引入SDK核心类
var QQMapWX = require('../../../lib/qqmap-wx-jssdk');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: 'key' // 必填
});
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取定位
app.getCityInfo().then(cityInfo => {
console.log('cityInfo==',cityInfo)
this.setData(
{
cityInfo
},
() => {
console.log('onLoad===',this.data.cityInfo)
}
);
});
},
// 视野发生变化时触发
regionChange(e) {
let that = this;
console.log('视野发生变化时触发===',that)
that.mpCtx = wx.createMapContext("myMap");
that.mpCtx.getScale({ //获取当前地图的缩放级别
success:(res)=>{
console.log('地图缩放级别',res.scale)
that.mpCtx.getCenterLocation({//获取当前地图中心的经纬度。返回的是 gcj02 坐标系
success:(res)=>{
console.log(res)
that.setData({
markers:[{
id:1,
width:25,
height:25,
iconPath:'/images/tx-map-l2.png',
longitude:res.longitude,
latitude:res.latitude,
title:res.address
}]
},()=>{
qqmapsdk.reverseGeocoder({ //逆地址解析
location:{
latitude: res.latitude,
longitude: res.longitude
},
success:(res1)=>{
let res = res1.result
console.log('逆地址解析res===',res)
that.setData({
chooseLat: res.location.lat,
chooseLng: res.location.lng,
chooseAddress: res.address,
chooseRecommend:res.formatted_addresses.recommend
})
}
})
})
}
})
},
fail: function() {
console.log('获取当前地图的缩放级别失败===')
}
})
}
})
如果您喜欢编程,或者您需要网站开发、app、小程序等等。。可以加入我qq:752193915。