EA&UML日拱一卒-微信小程序实战:位置闹铃 (2)-在地图上显示自己的位置
2018-01-31 18:23
886 查看
有了最终目标以后,我们继续采取每天一小步的方式进行开发,今天首先实现在地图上显示自己位置的功能。
画面截图
index.wxml
<!--index.wxml-->
<view class="container">
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style="
width: 375px; height: 500px;"></map>
<text class="angle_text">{{location}}</text>
</view>
内容很简单,画面上布置了一个map对象和text对象。
其中map对象分别指定了longitude,latitude和markers。相信你还记得:在双重花括号{{}}包围的部分是变量,它们的值在对应页面的js文件中定义。
index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: { //数据定义
longitude: 0, //
对应wxml文件中的longitude变量
latitude: 0, //
对应wxml文件中的latitude变量
location: ',', //
对应wxml文件中的location变量
markers: [{ //
对应wxml文件中的markers变量
id: 0,
latitude: 0,
longitude: 0,
width: 50,
height: 50
}],
},
onShow: function()
{
var that
= this
wx.getLocation({
type: 'gcj02', //
返回 可以 用于 wx. openLocation 的 经纬度
success: function (res)
{
var latitude
= res.latitude
var longitude
= res.longitude
console.log(res)
var location
= latitude.toFixed(2) + ',' +
longitude.toFixed(2)
that.setData({ longitude: longitude,
latitude: latitude,
location: location,
markers: [{latitude: latitude,
longitude: longitude,
}]
});
}
})
},
})
这段代码实现了生命周期函数onShow,它的核心是ws.getLocation,它的输出通过传递的success:function来处理。处理的内容很简单,就是通过setData函数设定到各个数据上。
虽然有点突然,但是这就是全部了。
参考资料
地图表示
https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map
获取位置
https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html
写在文章的最后
既然已经读到这里了,拜托大家再用一分钟时间,将文章转发到各位的朋友圈,微信群中。本公众号的成长需要您的支持!
以上就是今天的文章,欢迎点赞并推荐给您的朋友!
阅读更多更新文章,请扫描下面二维码,关注微信公众号【面向对象思考】
画面截图
index.wxml
<!--index.wxml-->
<view class="container">
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style="
width: 375px; height: 500px;"></map>
<text class="angle_text">{{location}}</text>
</view>
内容很简单,画面上布置了一个map对象和text对象。
其中map对象分别指定了longitude,latitude和markers。相信你还记得:在双重花括号{{}}包围的部分是变量,它们的值在对应页面的js文件中定义。
index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: { //数据定义
longitude: 0, //
对应wxml文件中的longitude变量
latitude: 0, //
对应wxml文件中的latitude变量
location: ',', //
对应wxml文件中的location变量
markers: [{ //
对应wxml文件中的markers变量
id: 0,
latitude: 0,
longitude: 0,
width: 50,
height: 50
}],
},
onShow: function()
{
var that
= this
wx.getLocation({
type: 'gcj02', //
返回 可以 用于 wx. openLocation 的 经纬度
success: function (res)
{
var latitude
= res.latitude
var longitude
= res.longitude
console.log(res)
var location
= latitude.toFixed(2) + ',' +
longitude.toFixed(2)
that.setData({ longitude: longitude,
latitude: latitude,
location: location,
markers: [{latitude: latitude,
longitude: longitude,
}]
});
}
})
},
})
这段代码实现了生命周期函数onShow,它的核心是ws.getLocation,它的输出通过传递的success:function来处理。处理的内容很简单,就是通过setData函数设定到各个数据上。
虽然有点突然,但是这就是全部了。
参考资料
地图表示
https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map
获取位置
https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html
写在文章的最后
既然已经读到这里了,拜托大家再用一分钟时间,将文章转发到各位的朋友圈,微信群中。本公众号的成长需要您的支持!
以上就是今天的文章,欢迎点赞并推荐给您的朋友!
阅读更多更新文章,请扫描下面二维码,关注微信公众号【面向对象思考】
相关文章推荐
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (5)-显示所在位置的信息
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (4)-从地图上选点
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (1)-功能介绍
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (7)-在画面之间共享数据
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (11)-稍微聪明一点
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (9)-利用条件渲染实现列表控件
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (12)-这还不算完
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (6)-播放音频
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (8)-WXML条件渲染
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (10)-定时器
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (3)-画面构成
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (13)-使用类优化程序结构
- EA&UML日拱一卒-0基础学习微信小程序(3)- 创建自己的小程序账号
- EA&UML日拱一卒-0基础学习微信小程序(15)-弄得像真的一样
- EA&UML日拱一卒-0基础学习微信小程序(2)- 关于小程序
- EA&UML日拱一卒-0基础学习微信小程序(11)-ECMAScript3数组操作方法
- EA&UML日拱一卒-0基础学习微信小程序(5)- Hello world!
- 微信小程序 实现获取当前位置并在地图上显示
- EA&UML日拱一卒-0基础学习微信小程序(12)-ECMAScript5数组操作方法
- EA&UML日拱一卒-0基础学习微信小程序(6)- 配置文件的形式和内容