微信小程序地图缩放失效怎么办

先前小编为大家推荐过小程序定位功能，也就是将小程序和现有的地图结合起来实现定位和导航，但是比较近有用户反映微信小程序地图缩放失效，那该怎么办呢？小编建议大家手动修改位置对地图横纵坐标进行缩放。

环境搭建

注册小程序，获取appid(没有这个不能真鸡调试)

微信网开发者工具（挺多臭虫，将就用)

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

工程结构

可以看到工程根目录中有个app.js，这里可以定义全局变量，通过getapp获取。

项目中有了一些示例，已经有了获取用户信息的方法等。

开发小程序地图定位，选择位置功能

我们直接修改指数页面来做这个功能。

准备

新建毕业生目录，加入2个图标(ic_location和ic_position)，用于标记当前位置，和地图中央位置。

添加定位功能

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

//app.js

app({

onlaunch:函数{

//调用美国石油学会(美国石油学会)从本地缓存中获取数据

var logs=wx。getstorageync(' logs ')| |[]

logs.unshift(date.now)

wx。setstoragesync(' log '，log)

}

，getuserinfo:function(cb){

变量=这个

if(this.globaldata.userinfo){

cb的类型==' function ' cb(这个。数据。用户信息)

}else{

//调用小程序登录接口

wx.login({

成功：功能{

wx.getuserinfo({

成功：功能(res) {

那个。数据。用户信息=资源。用户信息

cb的类型==' function ' cb(即。数据。用户信息)

}

})

}

})

}

}

//获取定位信息

，getlocationinfo : function(cb){

那=这个

if(this。数据。位置信息){

cb(这个。数据。位置信息)

}else{

wx.getlocation({

type: 'gcj02 '，//默认为wgs84返回定位系统坐标，gcj02返回可用于wx.openlocation的坐标

成功：功能(res){

那个。数据。位置信息=资源；

cb(那个。数据。位置信息)

},

fail:功能{

//失败

},

完成：功能{

//完成

}

})

}

}

，globaldata:{

userinfo:null

，locationinfo: null

}

})

地图控件布局

修改页面/索引/索引。页面结构文件，添加地图标签，如下

经度=' { {经度}} '纬度=' { {纬度}} '

标记='{{markers}} '

比例尺='20 '

style=' width : { { map _ width } } px；'' height:{{map_height}}px '

bindregionchange='regionchange '

控件=' { { controls } }

123456789

需要给地图指定一个id，后面可以通过编号获取地图的上下文。

监听bindregionchange事件，地图变化的时候可以监听到。

地图的大小不要写死，动态设置，我这里打算设置为宽高都是屏幕宽度。

控制是固定在地图组件上面的。一开始我想用图像替代，但是设置z指数也不能在地图上面，毕竟不是h5开发。

逻辑代码编写

编辑index.js

var app=getapp

页面({

数据：{

map_width: 380

，map_height: 380

}

//显示当前位置

，onload:函数{

那=这个

//获取定位，并把位置标示出来

app。getlocationinfo(函数(位置信息){

console.log('map '，位置信息)；

that.setdata({

经度： locationinfo。经度

,纬度locationinfo .纬度：

，markers:[

{

id: 0

，iconpath: '././imgs/ic_position.png '

,经度： locationinfo。经度

,纬度locationinfo .纬度：

,宽度： 30

,高度： 30

}

]

})

})

//设置宽度和高度

//动态设置地图的宽和高

wx.getsysteminfo({

成功：功能(res) {

控制台。日志(' get system info ')；

控制台。日志(记录窗口宽度)；

that.setdata({

map_width: res.windowwidth

，map_height: res.windowwidth

，控件：[{

id: 1，iconpath: '././imgs/ic_location.png '，位置： {

res.windowwidth/2路：号，top : res.windowwidth/2-16，宽度： 30，高度： 30

},

可： true

}]

})

}

})

}

//得到中点的经纬度，标出来

，getlnglat:函数{

that=this

this . mapctx=wx . create mapcontext(' map4 select ')；

this . mapctx . getcentral location({

成功：功能(res){

that.setdata({

经度： res .经度

纬度： res .纬度

，markers:[

{

id: 0

，iconpath: '././imgs/ic_position.png '

，经度： res .经度

纬度： res .纬度

，宽度： 30

，高度： 30

}

]

})

}

})

}

，regionchange(e) {

//当地图发生变化时，获取中点，即用户选择的位置

if(e.type=='end'){

this.getlnglat

}

}

，markertap(e) {

console.log(e)

}

})

下面是如何设置标题开头的小程序数据缓存。标题到此结束

像app一样，小程序在使用时有缓存，开发小程序所需的数据也可以缓存在小程序中。小程序的数据缓存怎么设置？看看下面的操作例子和对应的代码。

注意：localstorage是长期存储的，但我们不建议将所有密钥信息都存储在localstorage中，以防止用户更换设备。

wx.setstorage(对象)

将数据存储在本地缓存中指定的密钥中会覆盖与该密钥对应的原始内容，这是一个异步接口。

对象参数的描述：

示例代码

？

wx . set storage({ key : ' key ' data : ' value ' })

wx.setstoragesync(密钥，数据)

将数据存储在本地缓存中指定的密钥中会覆盖该密钥对应的原始内容，这是一个同步接口。

对象参数的描述：

示例代码

？

请尝试{ wx.setstoragesync('key '，' value')} catch (e) { }

wx.getstorage(对象)

从本地缓存异步获取指定键对应的内容。

对象参数的描述：

示例代码：

？

wx.getstorage({ key: 'key '，success : function(res){ console . log(res . data)} })

wx.getstoragesync(密钥)

从本地缓存中同步获取指定密钥对应的内容。

参数描述：

示例代码：

？

尝试{ var value=wx . getstorageync(' key ')if(value){//做一些有返回值的事情}

}捕捉(e) { //捕捉错误时做某事}

wx.getstorageinfo(对象)

关于当前存储信息的异步获取

对象参数的描述：

成功返回的参数描述：

示例代码：

？

wx . getstorageinfo({ success : function(res){ console . log(res . keys)console . log(res . current size)console . log(res . limitsize)} })

wx.getstorageinfosync

同步并获取当前存储的相关信息

示例代码：

？

请尝试{ var res=wx . getstorageinfosync console . log(res . keys)console . log(res . current size)console . log(res . limitsize)} catch(e){//do something what catch error }

wx.removestorage(对象)

从本地缓存异步移除指定的密钥。

对象参数的描述：

示例代码：

？

6wx . remove storage({ key : ' key '，success : function(res){ console . log(res . data)} })

关于小程序数据缓存以及缓存时应该注意的问题，小编在上面已经介绍的很清楚了。如果您有问题，可以在源社网的小节目频道留言，小编会及时回复。