微信小程序开发的地图组件位置偏差定位及手动修改

环境建设

注册并获取APPID(没有这个你无法调试)

下载微信网页开发者工具(bug颇多，会用到)

打开微信web developer工具，扫码登录，新建小程序，输入APPID，勾选创建快速启动项目。

工程结构

可以看到项目根目录下有一个app.js，可以通过getApp()定义和获取全局变量。

项目中有一些例子，也有获取用户信息的方法。

开发地图定位和选择位置功能

我们直接修改索引页面来做这个功能。

准备好

创建一个新的imgs目录，并添加两个图标(ic_location和ic_position)来标记地图的当前位置和中心位置。

添加定位功能

修改app.js，增加定位功能，获取当前位置。

//app . jsapp({ onlunch : function(){//调用API从本地缓存获取数据var log=wx . getstorageync(' log ')|[]log . unshift(date . now()))wx . setstorageync(' log '，log)}，getuserninfo : function(CB){ var=this if(this . globaldata . userinfo){ type of CB=' function ' CB(this . globaldata . userinfo)} els {//调用登录界面wx如果(这个。globaldata.locationinfo) {CB(这个。global data . location info)} else { wx . getlocation({ type : ' gcj 02 '，//默认情况下，wgs84返回gps坐标。Gcj02返回坐标成功：函数。globaldata。locationinfo=RESCb(那个。globaldata.locationinfo)}、fail:function () {//fail}、complete : function(){//complete } })}、global data 3360 { user info 3360 null、locationinf3360 null})映射控件布局

修改pages/index/index.wxml文件并添加地图标记，如下所示

地图id='map4select '经度=' { {经度}} '纬度=' { {纬度}} '标记='{{markers}} '比例尺='20 '样式=' width: { { map _ width } } pxheight : { { map _ height } } px ' binderegionchange=' regionchange ' controls=' { { controls } } '/map需要给地图分配一个id，然后通过id就可以得到地图的上下文。

监视bindregionchange事件，该事件可以在地图更改时进行监视。

不要写下地图的大小，而是动态设置。我计划将其设置为屏幕的宽度和高度。

控件固定在地图组件上。一开始想用image代替，但是设置z-index不能在地图上。毕竟，它不是H5开发的。

逻辑代码编写

编辑index.js

var app=GetApp()Page({ data : { map _ width : 380，map _ height : 380 }//显示当前位置，onLoad:函数(){ var那=this//获取定位，并把位置标示出来app.getLocationInfo(函数(locationInfo){ console.log('map '，位置信息)；that . setdata({ 0经度： locationInfo。经度，纬度： locationInfo。纬度，标记：[ { id: 0，iconPath: '././imgs/ic_position.png '，经度： locationInfo。经度，纬度： locationInfo。纬度，宽度： 30,高度： 30 }]})})//设置宽度和高度/动态设置地图的宽和高wx。getsystem info({ success : function(RES){ console。日志(' get system info ')；控制台。log(RES . WiNDOW宽度)；那个。setdata({ map _ width : RES . window width，map_height: res.windowWidth，controls: [{ id: 1，iconPath: '././imgs/ic_location.png '，位置： {左侧： res.windowWidth/2-8,顶部： res.windowWidth/2-16,宽度： 30,高度： 30 },可点击： true }]})})}//获取中间点的经纬度，并标记出来，getLngLat:函数(){ var即=这是。mapctx=wx。create mapcontext(' map 4 select ')；这个。mapctx。get central location({ success : function(RES)}即。setdata({ 0经度：分辨率。经度，纬度：分辨率。纬度，标记： [{ id : 0 0，iconPath: '././imgs/ic_position.png '，经度：分辨率。经度，纬度：分辨率。纬度，宽度： 30,高度： 30 }]})})}),区域变更(e) { //地图发生变化的时候，获取中间点，也就是用户选择的位置if(e . type==' end '){ this。getlnglat()} }，markertap(e) { console.log(e) })展示

这样，就好啦，用户可以看到自己的定位，如果觉得有偏差，可以移动地图，把中央点放到自己认为的准确位置上。