微信小程序地图缩放功能怎么实现?

　　微信小程序地图缩放功能怎么实现?在使用地图的时候，大家都会要用到地图的缩放放大功能，那么这么简单的一个功能在小程序开发中如何实现呢?下面小编给大家简单的介绍一下吧。

　　微信小程序地图缩放功能怎么实现?

　　其实，小程序地图里面的缩放放大功能用专业的解释就是地图的控制层--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

　　})

　　// }

　　}

　　},

　　})

　　以上就是小编为大家搜集的微信小程序地图缩放功能怎么实现?的全部内容了，希望能帮到大家。如果你还有更多疑问或者建议，可以来我们微小乔的网站哦，谢谢大家的关注!

相关推荐：

微信小程序卫星地图开发实例

微信小程序地图导航,景区地图导航应用微信小程序

微信小程序导航地图开发实例