小程序地图如何缩小？小程序地图缩小的方法

　　小编之前为大家介绍过让小程序地图达到满屏的效果，但是很多用户反映这样查看起来不太方便。小程序地图适当缩小一些更容易查看，那么小程序地图如何缩小呢?

　　其实，小程序地图里面的缩放放大功能用专业的解释就是地图的控制层--controls，它就是地图上的控件，而且不会随着地图的移动而移动，固定在屏幕上面的某个位置。下面我们先看小程序api吧。

　　看完小程序api的说明，我们在来看下小程序页面效果图吧。

　　大家注意看下效果图的右上角，有两个小程序按钮，加减号，是控制地图scale的数值变化，动态缩放地图的，就是我们要用到的地图缩放功能。它的用法也很简单：

　　最后给大家上具体的小程序代码吧：

　　小程序wxml：

　　小程序js：

　　Page({

　　data: {

　　Height: 0,

　　scale: 13,

　　latitude: "",

　　longitude: "",

　　markers: [],

　　controls: [{

　　id: 1,

　　iconPath: '/assests/imgs/jian.png',

　　position: {

　　left: 320,

　　top: 100 - 50,

　　width: 20,

　　height: 20

　　},

　　clickable: true

　　},

　　{

　　id: 2,

　　iconPath: '/assests/imgs/jia.png',

　　position: {

　　left: 340,

　　top: 100 - 50,

　　width: 20,

　　height: 20

　　},

　　clickable: true

　　}

　　],

　　circles: []

　　},

　　onLoad: function () {

　　var _this = this;

　　wx.getSystemInfo({

　　success: function (res) {

　　//设置map高度，根据当前设备宽高满屏显示

　　_this.setData({

　　view: {

　　Height: res.windowHeight

　　}

　　})

　　}

　　})

　　wx.getLocation({

　　type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标

　　success: function (res) {

　　_this.setData({

　　latitude: res.latitude,

　　longitude: res.longitude,

　　markers: [{

　　id: "1",

　　latitude: res.latitude,

　　longitude: res.longitude,

　　width: 50,

　　height: 50,

　　iconPath: "/assests/imgs/my.png",

　　title: "哪里"

　　}],

　　circles: [{

　　latitude: res.latitude,

　　longitude: res.longitude,

　　color: '#FF0000DD',

　　fillColor: '#7cb5ec88',

　　radius: 3000,

　　strokeWidth: 1

　　}]

　　})

　　}

　　})

　　},

　　regionchange(e) {

　　console.log("regionchange===" + e.type)

　　},

　　//点击merkers

　　markertap(e) {

　　console.log(e.markerId)

　　wx.showActionSheet({

　　itemList: ["A"],

　　success: function (res) {

　　console.log(res.tapIndex)

　　},

　　fail: function (res) {

　　console.log(res.errMsg)

　　}

　　})

　　},

　　//点击缩放按钮动态请求数据

　　controltap(e) {

　　var that = this;

　　console.log("scale===" + this.data.scale)

　　if (e.controlId === 1) {

　　// if (this.data.scale === 13) {

　　that.setData({

　　scale: --this.data.scale

　　})

　　// }

　　} else {

　　// if (this.data.scale !== 13) {

　　that.setData({

　　scale: ++this.data.scale

　　})

　　// }

　　}

　　},

　　})

　　参照上文中的方法和具体的代码，小程序地图如何缩小这个问题就能成功解决了，大家都学会了吗?希望这份资料能对大家有所帮助，如果还想获取更多相关资料请关注微信小程序商店。

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

　　微信小程序地图周边功能如何实现?

　　微信小程序地图距离怎么获取?