一、官方地址
- map 组件:
https://developers.weixin.qq.com/miniprogram/dev/component/map.html - 地图相关api:
https://developers.weixin.qq.com/miniprogram/dev/api/media/map/wx.createMapContext.html
详细参数以及用法可参见官方地址 ↑
二、基本用法
- wxml
<!-- markers="{{markers}}" -->
<map
class="location-map"
id="theMap"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="15"
show-location
></map>
- js
data: {
longitude: '113.324520', // 经度
latitude: '23.099994', // 纬度
markers: [{
id: 1,
longitude: '113.324520', // 经度
latitude: '23.099994', // 纬度
title: '当前位置', // 标记点标题
alpha: 0.7, //标记图标透明度
}], // 标记点
},
// 获取 map 实例mapCtx
onReady: function () {
//获取map上下文
//参数:1.string mapId(组件id); 2.Object this(在自定义组件下,当前组件实例的this,以操作组件内 组件)
// 返回值:MapContext实例,mapContext 通过 id 跟一个组件绑定,操作对应的组件
this.mapCtx = wx.createMapContext('theMap');
// this.getCenterLocation();
},
// 可用在onShow()中调用getLocation()方法获取经纬度
onShow: function () {
var that = this;
wx.getLocation({ //没有特别说明的都是固定写法
type: 'gcj02',
success: function (res) {
console.log('location', res);
let longitude = res.longitude;
let latitude = res.latitude;
that.setData({
longitude: longitude, // 经度
latitude: latitude, // 纬度
});
// 移动坐标点(若map组件中有定义markers)
// that.translateMarker();
}
});
},
使用 getLocation() 需要在 app.json 中声明:permission,如下
"permission": {
"scope.userLocation": {
"desc": "我们将调取您的位置信息"
}
},
- wxss
.location-map {
width: 100%;
height: 280rpx;
}
/*
可以直接在 map标签 中使用style定义:
style="width: 100%; height: 280rpx;"
*/
三、阅读