小程序运行于微信,类似于h5页面,使用微信开发者工具建立小程序工程,json文件储存相关的配置,wxml文件类似于html文件,wxss类似于css文件,js文件编写逻辑。
这个demo展示了小程序的地图控件、地图标记、定位、扫码、导航等。
效果:
app.js
前边部分是生成的,在onLaunch中获取屏幕尺寸相关的信息,储存在globalData中。
//app.js
App({
onLaunch: function () {
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
console.log(this.globalData)
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
var that = this
//获取屏幕尺寸,放到全局结构中
wx.getSystemInfo({
success: function (res) {
that.globalData.scHeight = res.windowHeight
that.globalData.scWidth = res.windowWidth
},
})
console.log(this.globalData.scWidth)
console.log(this.globalData.scHeight)
},
globalData: {
userInfo: null,
scWidth: 0, //全局的屏幕尺寸,已经去掉了上边的标题栏
scHeight: 0
}
})
index.wxml
地图控件,可以参照小程序文档设置地图控件的属性,设置了控件上的按钮、经纬度、点击、标记等回调函数。show-location属性是必须的,不然他不显示当前定位。
<!--index.wxml-->
<map
id="myMap"
style="width:100vw;height:100vh"
latitude="{{latitude}}"
longitude="{{longitude}}"
controls="{{mapControls}}"
markers="{{markers}}"
bindcontroltap="mapControlTap"
bindregionchange="regionChanged"
bindtap="mapTap"
bindmarkertap="mapMarker"
show-location
>
</map>
index.js
地图控件的逻辑部分,控件定位使用了app globalData中储存的屏幕尺寸,然后计算相对尺寸,保证在各种分辨率屏幕中的正常显示。
地图控件被点击的回调函数mapControlTap参数中的id与mapControls中的id一一对应,确定点击的按钮集处理。
地图标记是regionChanged回调时添加的,详细的看下文档加上去。
扫码和导航就直接调api了。
//index.js
//获取应用实例
const app = getApp()
Page
(
{
data:
{
latitude: 23, //经纬度
longitude: 113,
markers:[],
mapControls: //地图控件
[
{ //定位
id: 0,
position: { //相对定位
left: app.globalData.scWidth * 0.03,
top: app.globalData.scHeight * 0.9,
width: app.globalData.scWidth * 0.1
},
iconPath: "../../image/locat.png", //相对于当前文件的路径
clickable: true
},
{ //扫码
id: 2,
position: { //相对定位
left: app.globalData.scWidth * 0.33,
top: app.globalData.scHeight * 0.85,
width: app.globalData.scWidth * 0.4,
height: app.globalData.scWidth * 0.2
},
iconPath: "../../image/scan.png",
clickable: true
},
{ //我的
id: 3,
position: { //相对定位
left: app.globalData.scWidth * 0.87,
top: app.globalData.scHeight * 0.9,
width: app.globalData.scWidth * 0.1
},
iconPath: "../../image/my.png",
clickable: true
},
{ //地图中心
id: 14,
position: { //相对定位
left: app.globalData.scWidth * 0.47,
top: app.globalData.scHeight * 0.42,
width: app.globalData.scHeight * 0.04
},
iconPath: "../../image/center.png",
clickable: false
}
]
},
getLocation: function (){ //获取当前位置,并移动地图到当前位置
this.myMapCtx.moveToLocation()
},
onLoad: function () { //加载
this.myMapCtx = wx.createMapContext("myMap", this)
this.getLocation()
},
regionChanged: function (e) { //地图视野改变
if (e.type == "end") {
var that = this
this.myMapCtx.getCenterLocation({ //获取中心点的经纬度
success: function (res) {
var mark = that.data.markers
var id = that.data.markers.length
var width = app.globalData.scWidth * 0.1
mark.push({ //放到标记里边
longitude: res.longitude, //经纬度
latitude: res.latitude,
iconPath: "/image/marker.png", //图标,相对于小程序根目录的路径
id: id,
width: width,
height: width,
title: "what is this?",
callout: { //气泡
content: "what is this?",
color: "lightgray",
fontSize: 15,
borderRadius: 5,
bgColor: "white",
display: "ALWAYS", //显示模式
padding: 5,
textAlign: "center"
},
label: { //标记下表的文本标签
content: "位置标记",
color: "lightgray",
textAlign: "center",
fontSize: 15
}
})
that.setData({ //必须使用setData设置,不然会出现数据跟新了,但是地图视图不跟新的情况
"markers": mark
})
}
})
}
},
scanCode:function(){ //扫描二维码
wx.scanCode({
success(res){ //扫码成功
wx.showModal({ //扫码结果
title: "扫码结果",
content: res.result,
})
}
})
},
navigateToPersonal:function(){
wx.navigateTo({
url: "/pages/personal/personal"
})
},
mapControlTap: function (e) { //地图控件点击
switch (e.controlId) {
case 0://定位
this.getLocation()
break;
case 2://扫码
this.scanCode()
break;
case 3://我的
this.navigateToPersonal()
break;
}
},
mapTap: function(e){ //地图点击
//console.log(e)
},
mapMarker:function(e){
console.log("点击了标记:" + e.markerId)
}
}
)
代码:https://github.com/yangyang0312/wxapp/tree/master/mapDemo