大飞

关注TA

挑战一切！

加入社区3,250天
写了333,609字

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

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

发布于 2017/01/14 20:40 2,051浏览 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("什么鬼")
            },

        })
    },


})

点了个评