前端之家收集整理的这篇文章主要介绍了
微信小程序 地图相关代码,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Page({
data: {
// markers 标记点
// id: marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。
// latitude: 纬度
// longitude: 经度
// iconPath: 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径
latitude: 0,// 地图打开默认经度
longitude: 0,// 地图打开默认纬度
markers: [],controls: [{
id: 1,iconPath: '/resources/location.png',position: {
left: 10,top: 400,width: 30,height: 30
},clickable: true
}]
},onLoad: function() {
this.mapContext = wx.createMapContext("map",this);
wx.getLocation({
success: (res) => {
this.setData({
latitude: res.latitude,longitude: res.longitude
})
}
}),this.getCenterLocation();
},// 定义函数,这个函数获取地图中心位置坐标
getCenterLocation: function() {
this.mapContext.getCenterLocation({
success: (suc) => {
this.setData({
markers: [{
iconPath: "/resources/user.png",id: 0,longitude: suc.longitude,latitude: suc.latitude,height: 30,alpha: 0.5,callout: {
content: "工程师",color: "#ffffff",fontSize: 10,borderRadius: 10,bgColor: "#6e707c",padding: 5,display: "ALWAYS"
}
}]
});
},});
},// chooseLocation: function() {
// wx.chooseLocation({
// success: (res) => {
// this.setData({
// latitude: res.latitude,// longitude: res.longitude
// })
// wx.getLocation({
// success: (res) => {
// this.setData({
// latitude: res.latitude,// longitude: res.longitude
// })
// }
// }),// this.getCenterLocation();
// }
// })
// },regionchange(e) {
console.log(e.type)
},markertap(e) {
console.log(e.markerId)
},controltap(e) {
console.log(e.controlId)
}
})