微信小程序<map>改变地图缩放级别
2018-03-05 16:09
597 查看
微信小程序<map>改变地图缩放级别
右上角,有两个按钮,分别为级别加减号,用来控制地图scale的数值变化,动态缩放地图
1.map.wxml
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" circles="{{circles}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width:100%; height:{{view.Height}}px;" ></map>
2.map.js
Page({ data: { Height: 0, scale: 13, latitude: "", longitude: "", markers: [], controls: [{ id: 1, iconPath: '../images/jia.png', position: { left: 250, top: 100, width: 60, height: 60 }, clickable: true },{ id: 2, iconPath: '../images/jian.png', position: { left: 250, top: 160, width: 60, height: 60 }, 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: "../images/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) { that.setData({ scale: --this.data.scale }) } else { that.setData({ scale: ++this.data.scale }) } }, })
相关文章推荐
- 微信小程序<map> callout
- 微信小程序< 1 > ~ Hello 微信小程序
- 图像的影像地图超链接,<map>标签浅谈
- 微信小程序——<radio></radio>大小改变
- 微信小程序< 2 > ~ 微信小程序之头条新闻
- 微信小程序< 2 > ~ 微信小程序之头条新闻
- 微信小程序< 3 > ~ 微信小程序开源项目合集
- 微信小程序<web-view>出现{"base_resp":{"ret":-1}}
- 微信小程序< 3 > ~ 微信小程序开源项目合集
- 微信小程序< 1 > ~ Hello 微信小程序
- 关于微信小程序<text>标签用flex布局不能居中的问题解决
- <微信管家源码>自定义菜单失效
- 保持比例图像缩放简易算法 <转>
- <高仿微信>我的高仿微信
- Google Maps API V3学习【限制地图缩放级别和显示范围 包含V2版本程序】
- 微信开发<三> 自定义菜单
- google map限制地图缩放级别和显示范围
- UI动画架构(上下滚动,里面View可以实现动画<透明,移动,缩放,变色>l)
- Thymeleaf基础 遍历List、Map、List<map>、Map<List>
- openlayers中设置地图缩放级别