注册,获取APPID(没有这个不能真鸡调试)
下载微信网页开发者工具(挺多错误,将就用)
打开微信网页开发者工具,扫码登录,新建小程序,输入APPID,勾选创建快速启动项目。
可以看到工程根目录中有个app.js,这里可以定义全局变量,通过getApp()获取。
项目中有了一些示例,已经有了获取用户信息的方法等。
我们直接修改索引页面来做这个功能。
新建一个目录,加入2个图标(ic_location和ic_position),用于标记当前位置,和地图中央位置。
//app.js
应用程序({>
& lt;地图id=" map4select "
经度纬度=="{{经度}}{{纬度}}”
标记="{{标记}}"
规模=" 20 "
bindregionchange=" regionchange "
控制="{{控制}}"比;
& lt;/map>
需要给地图指定一个id,后面可以通过id获取地图的上下文。
监听bindregionchange事件,地图变化的时候可以监听到。
地图的大小不要写死,动态设置,我这里打算设置为宽高都是屏幕宽度。
控件是固定在地图组件上面的。一开始我想用图像替代,但是设置z - index也不能在地图上面,毕竟不是H5开发。
编辑index.js
应用var=getApp ()
页面({
数据:{
map_width: 380
map_height: 380
}//显示当前位置
onLoad:函数(){
var=这个;//获取定位,并把位置标示出来
app.getLocationInfo(函数(locationInfo) {
console.log(“地图”,locationInfo);
that.setData ({
经度:locationInfo.longitude
纬度:locationInfo.latitude
标记:[
{
id: 0
iconPath:“. ./. ./一/ic_position.png”
经度:locationInfo.longitude
纬度:locationInfo.latitude
宽度:30
、身高:30
}
］
}）
}）//设置宽度和高度//动态设置地图的宽和高
wx.getSystemInfo ({
成功:函数(res) {
console.log (“getSystemInfo”);
console.log (res.windowWidth);
that.setData ({
map_width: res.windowWidth
map_height: res.windowWidth
、控制:[{
id: 1、
iconPath:“. ./. ./一/ic_location.png”,
位置:{
左:res.windowWidth/2 - 8,
上图:res.windowWidth/2 - 16,
宽度:30,
高度:30
},
点击:真
})
}）
}
}）
}//获取中间点的经纬度,并标记出来
getLngLat:函数(){
var=这个;
这一点。mapCtx=wx.createMapContext (“map4select”);
this.mapCtx.getCenterLocation ({
成功:函数(res) {
that.setData ({
经度:res.longitude
纬度:res.latitude
标记:[
{
id: 0
iconPath:“. ./. ./一/ic_position.png”
经度:res.longitude
纬度:res.latitude
宽度:30
、身高:30
}
］
}）
}
}）
}
regionchange (e) {//地图发生变化的时候,获取中间点,也就是用户选择的位置
如果(e。类型==崾?{
this.getLngLat ()
}
}
markertap (e) {
console.log (e)
}
})
这样,就好啦,用户可以看到自己的定位,如果觉得有偏差,可以移动地图,把中央点放到自己认为的准确位置上。
