微信小程序开发之——map组件

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • wx.getLocation获取用户当前位置信息
  • map组件的基础属性(显示带有方向的当前定位点，显示指南针，开启卫星图)
  • map添加标记点marker

二 map使用-当前不是定位位置

2.1 布局文件(index.wxml)

1
<map id="map"></map>

2.2 样式文件(index.wxss)-全屏

1
2
3
4
map{
  height: 100vh;
  width: 100vw;
}

2.3 效果图

三 map获取当前位置显示(添加精度和纬度)

3.1 布局文件(index.wxml)

1
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"></map>

3.2 逻辑文件(index.js)—获取当前位置设置精度和纬度

1
2
3
4
5
6
7
8
9
10
11
onLoad: function (options) {
    wx.getLocation({
      type:'gcj02',
      success:res=>{
          this.setData({
            longitude: res.longitude,
            latitude: res.latitude
          })
      }
    })
  },

3.3 权限授予

3.3.1 未授权前

3.3.2 点击查看详情，跳转小程序位置授权

1
2
3
4
5
6
7
8
{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }
}


说明：

  • 将上述代码配置到app.js下

3.3.4 保存后，显示获取位置对话框

3.3.5 允许后，显示当前位置视图

四 map组件的基础属性

4.1 地图基础属性-仅列出几项

属性 类型 说明
show-location boolean 显示带有方向的当前定位点
show-compass boolean 显示指南针
enable-satellite boolean 是否开启卫星图

4.2 布局文件(index.wxml)

1
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" show-location show-compass enable-satellite></map>

4.3 效果图

五 map添加标记点marker

5.1 布局文件(index.wxml)

1
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"  markers="{{markers}}" show-location show-compass enable-satellite></map>

5.2 逻辑文件(index.js)-addMark

5.2.1 addMark函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
addMark(res){
   var marker=[]
   marker.push({
     id:1, //标记点 id
     width:50,
     longitude: res.longitude,
     latitude: res.latitude,
     label:{
       content:'我的位置',
       color:'#f00',
       fontSize:20
     },
     callout:{
       content:'气泡',
       color:"#f00",
       fontSize:30
     },
     iconPath:'/images/center.png'
   })
   this.setData({
     markers:marker
   })
 },

5.2.2 位置获取成功后，调用添加addMark函数

1
2
3
4
5
6
7
8
9
10
11
12
onLoad: function (options) {
   wx.getLocation({
     type:'gcj02',
     success:res=>{
         this.setData({
           longitude: res.longitude,
           latitude: res.latitude
         })
         this.addMark(res)
     }
   })
 },

5.3 效果图

六 源码

参考代码