最近做毕设，需要获取地点坐标，有了地图地图，想想怎么来简单点。
就上网搜了搜（官方有提供地图选点返回经纬度的，但是感觉手指操作不太精准，就想着换一种）
然后自己写了个demo（代码再后面）
大体思路是在map中心放个很小的圈圈定位用（map中flex垂直水平居中不太行，用了position: absolute的老方法）
然后使用MapContext.getCenterLocation获取当前地图中心的经纬度
再使用MapContext.addMarkers添加 marker（callout中显示坐标）
这样一拖动地图就能显示地图中心标记点及经纬度
顽皮一下（addMarkers里忘写clear: true的后果哈哈哈哈哈哈）
代码：
<!--pages/map/map.wxml-->
<!-- <text>pages/map/map.wxml</text> -->
<view class="view">
<map
class="view_map"
id="map"
subkey="{
{subKey}}"
latitude="{
{latitude}}"
longitude="{
{longitude}}"
scale="{
{scale}}"
show-location="{
{showLocation}}"
enable-poi="{
{enable_poi}}"
markers="{
{markers}}"
bindregionchange="changeCenterLocation"
>
<!-- 自己去iconfont随便下个圈圈图案就行 -->
<image class="img" src="../../circle.png" mode=""/>
</map>
</view>// pages/map/map.js
Page({
/**
* 页面的初始数据
*/
data: {
windowHeight: 1,
windowWidth: 1,
lo: 1,
la: 1,
subKey: '自己的key',
latitude: '纬度',
longitude: '经度',
scale: 16,
showLocation: true,
enable_poi: false,
markers: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.mapCtx = wx.createMapContext('map')
// 没底图的就用不上这个方法
this.mapCtx.addGroundOverlay({
id: 0,
src: "自己的底图",
bounds: {
southwest: { //西南角
latitude: 自己写,
longitude: 自己写,
},
northeast: { //东北角
latitude: 自己写,
longitude: 自己写,
}
},
opacity: 0.7,
})
var that = this
wx.getSystemInfo({
success: function(res){
that.setData({
windowWidth: res.windowWidth,
windowHeight: res.windowHeight,
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.mapCtx = wx.createMapContext('map',this)
},
/**
* 获取中心点坐标
*/
changeCenterLocation: function () {
var that =this
this.mapCtx.getCenterLocation({
success: function(res){
console.log(res.longitude)
console.log(res.latitude)
that.setData({
lo: res.longitude.toFixed(6),
la: res.latitude.toFixed(6),
})
that.addMarkers()
}
})
},
/**
* 添加marker点
*/
addMarkers: function () {
this.mapCtx.addMarkers({
markers:[
{
id: 0,
latitude: this.data.la,
longitude: this.data.lo,
callout:{
content: " "+this.data.la+" "+this.data.lo+" ",
display: 'ALWAYS',
}
}
],
clear: true,
})
console.log(this.data.markers)
}
})/* pages/map/map.wxss */
page {
height: 100%;
width: 100%;
}
.view {
height: 100%;
width: 100%;
}
.view_map {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.img {
height: 10px;
width: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}思路：
https://blog.csdn.net/ITLISHUANG/article/details/89920332
https://blog.csdn.net/u010481239/article/details/83280946
https://blog.csdn.net/qq_22079371/article/details/89177747