大飞

大飞 关注TA

挑战一切!

大飞

大飞

关注TA

挑战一切!

  •  世界的顶端
  • 混口饭吃
  • 写了333,609字

最近回复

该文章投稿至Nemo社区   Js、Css、Html  板块 复制链接


微信小程序——map地图控件的使用

发布于 2017/01/14 20:40 1,875浏览 0回复 2,196

       map——地图控件,不能再scroll-view 中使用,本案例先使用 wx.getLocation()方法获取当前坐标,然后将值设置到地图显示,本次案例简单显示其覆盖物。小程序文档中对covers和markers描述有些冲突,待后面查证。

      看实现效果:

 


视图层

<view class="page">
<view><text>纬度:{{latitude}}</text></view>
<view><text>经度:{{longitude}}</text></view>
<map style="width: 100%; height: 400px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
        markers="{{markers}}"
        covers="{{covers}}"
        scale="14"/> 
</view>

控制层:

//获取应用实例
var app = getApp()
var util = require('../../../utils/util.js')
Page({
    data: {
        latitude: 0,//纬度  
        longitude: 0,//经度  
        markers: [{
            latitude: 0,
            longitude: 0,
            name: '苏州'
        }],
        covers: [{
            latitude: 0,
            longitude: 0,
            iconPath: '../../images/wechatHL.png', // 目前有 bug,正确的写法应该是 /image/green_tri.png ,等我们下个版本修复吧T_T 
        }]
    },
    //获取当前的经纬度
    onLoad: function () {
        var that = this;
        wx.getLocation({
            type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
            success: function (res) {
                // success
                console.log(res);
                var marker = that.data.markers[0];
                marker.latitude = res.latitude
                marker.longitude = res.longitude
                var cover = that.data.covers[0];
                cover.latitude = res.latitude
                cover.longitude = res.longitude
                that.setData({
                    latitude: res.latitude,//纬度  
                    longitude: res.longitude,//经度  
                })
                var changeData = {}
                changeData['markers[' + 0 + ']'] = marker
                that.setData(changeData)
                var changeData = {}
                changeData['covers[' + 0 + ']'] = cover
                that.setData(changeData)


            },
            fail: function () {
                // fail
                util.showToast("什么鬼")
            },

        })
    },


})

点赞(0)
点了个评