用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序之map地图

纸飞机 2018-3-8 09:38

微信地图操作比较简单,api也很少,使用map组件来展示。说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下:wx.getLocation({ type: 'wgs84', success: function(res) { var latit ...

微信地图操作比较简单,api也很少,使用map组件来展示。说到地图,那就先来看基础定位:
定位用到wx.getLocation(OBJECT)函数,代码如下:

  1. wx.getLocation({
  2. type: 'wgs84',
  3. success: function(res) {
  4. var latitude = res.latitude
  5. var longitude = res.longitude
  6. var speed = res.speed
  7. var accuracy = res.accuracy
  8. }
  9. })

定位成功会返回四个参数值,如下:

map属性太多,先看一下:

如果用到地图,基本上所有属性都会用到。
下面一一看一下,我们先看效果图吧,先看真相:

这里我只用了一个markers,就是定位当前位置的红色markers,用法如下:

  1. wx.getLocation({
  2. type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
  3. success: function (res) {
  4. _this.setData({
  5. latitude: res.latitude,
  6. longitude: res.longitude,
  7. markers: [{
  8. id: "1",
  9. latitude: res.latitude,
  10. longitude: res.longitude,
  11. width: 50,
  12. height: 50,
  13. iconPath: "/assests/imgs/my.png",
  14. title: "哪里"
  15. }],
  16. circles: [{
  17. latitude: res.latitude,
  18. longitude: res.longitude,
  19. color: '#FF0000DD',
  20. fillColor: '#7cb5ec88',
  21. radius: 3000,
  22. strokeWidth: 1
  23. }]
  24. })
  25. }
  26. })

这里加了circles,半径是3000米,具体的api可自行看官网。

接下来看看controls,控制层,在地图上显示控件,控件不随着地图移动,看API:

注意看示例图的右上角,有两个按钮,加减号,是控制地图scale的数值变化,动态缩放地图的,controls用法也很简单:

  1. controls: [{
  2. id: 1,
  3. iconPath: '/assests/imgs/jian.png',
  4. position: {
  5. left: 320,
  6. top: 100 - 50,
  7. width: 20,
  8. height: 20
  9. },
  10. clickable: true
  11. },
  12. {
  13. id: 2,
  14. iconPath: '/assests/imgs/jia.png',
  15. position: {
  16. left: 340,
  17. top: 100 - 50,
  18. width: 20,
  19. height: 20
  20. },
  21. clickable: true
  22. }
  23. ]

最后我们看一张gif图:

最后上一下具体代码:
wxml:

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏